CSS 3 Selector Explanation

Css Roger Johansson(This foreigner seems to be involved in compiling the consortium) a few days ago wrote a article about CSS 3: CSS 3 Selectors explainedIt said in December last year, the latest development of the new CSS 3 tags, new usage, I use machine translation looked also quite cool, to read the excerpt down, we also learn the advanced experience. Oh ~

In CSS 3, suppose you make an HTML file that contains the following tag structure:

<div id= "Nav-primary" ></div>
<div id= "Content-primary" ></div>
<div id= "Content-secondary" ></div>
<div id= "Tertiary-content" ></div>
<div id= "Nav-secondary" ></div>

And then, in the CSS file,

Div[id^= "Nav"] {background: #ff0;}

Attention is "^"
CSS in this case will control div#nav-primary and Div#nav-secondary. Please note that there are nav in front of both tags, whether it is separated by "-", or whether the ID is matched from the previous to the unknown [sweat]

Div[id$= "PRIMARY"] {background: #ff0;}

Note is "$"
CSS in this case will control div#nav-primary and Div#content-primary. Please note that these two tags are primar , in the end is "-" as a separate, or to the ID from the back to the previous match is not known [sweat]

div[id*= "Content"] {background: #ff0;}

Attention is "*"
CSS in this case will control div#content-primary div#content-secondary and Div#tertiary-content. Please note that these tags all contain content , in the end is "-" as a separate, or the ID automatically scanned after the match is even more unknown [sweat]

As if the author said that these tags now in addition to IE does not support, the other latest version of the various browsers are supported, we can try, I will not try ~ [lol]

Div#content-primary:target {outline:1px solid #300;}

Note that ": Target"
CSS in this case will control http://www.example.com/index.html#content-primary this anchor link (the anchor chain connection is almost understandable is a page of links, compared to some of the Web page to see back to top )

The authors say Mozilla and Safari browsers now support this

Input[type= "text"]:enabled {background: #ffc;}
Input[type= "text"]:d isabled {background: #ddd;}

Note that "[type=" text "]:enabled"
This is the control of the form of CSS, "[type=" text "]" as if the form is the type is text ... What would type= "password" be?

input:checked {border:1px solid #090;}

Pay attention to the ": Checked"
This is the control form of the "choice" of CSS ...

The authors say opera and Mozilla browsers now support these

: root {background: #ff0;}
HTML {background: #ff0;}

Attention to that ": Root"
This ": Root" is higher than the HTML tag, which we can see a leaf thousand birds write the correct understanding of HTML and body he found in the text of the original HTML outside there is a box, hey ~

The authors say Mozilla and Safari browsers now support this

Next : Nth-child () is more interesting, hehe ~ in parentheses can put numbers and the default letter ~

P:nth-child (3) {color: #f00;}

This is like saying that the first occurrence of p as a basis, as long as the multiple of "3" all P will be controlled ~

P:nth-child (odd) {color: #f00;}

This is like saying that the first occurrence of P is based, then the odd purpose all p will be controlled ~

P:nth-child (even) {color: #f00;}

This is like saying that the first occurrence of P is based, and then even the end of all p will be controlled ~

P:nth-child (3n+0) {color: #f00;}
P:nth-child (3n) {color: #f00;}

The two tags are equivalent, because the first 0 is not working, he means 3 times times the first p p will be controlled ~ (good around the mouth, hoho~ [rolleyes]) that means this "n" from 0.1.2.3.4.5.6 .... Always take the value down ~ figure out how much is the number of P will be controlled ...

Tr:nth-child (2n+11) {background: #ff0;}

This if you understand the above, this is not difficult to understand, but his control of the label into a "tr" that means that the table will become more changeable, I feel that we must be a good primary school, learn a bad quickly go home and learn a primary school count go ... (However, does such a label aggravate the efficiency of computer processing?) [Confused] hope my heart is superfluous ... ）

P:last-child {background: #ff0;}

A P is controlled before P (nnd,p to P go, play pp [sweat])

: Not (p) {border:1px solid #ccc;}

This p is not controlled, since the use of the style of the meaning of it, it should be with those in front of the ...

P ~ ul {background: #ff0;}

UL priority is shown in P, this is why did priority method, not clear ...

Basically, I can see that this is all, we could go to the following two Web site to learn, I have something to say wrong, remember to tell me AH
www.456bereastreet.com/archive/200601/css_3_selectors_explained/
www.w3.org/TR/2005/WD-css3-selectors-20051215/