E:nth-child(n){ sRules }
* Matches the child element E
:nth-child(n) allows you to match any child element of the parent element:
Figure 1:<section id="demo"> <h1>选取ul第一个子元素li</h1> <ul> <li>如果我是红色,说明你的选择到了我,浏览器还颇为先进</li> <li>落后的浏览器</li> <li>落后的浏览器</li> <li>落后的浏览器...#demo li:nth-child(1){ color:#f00;}
Key point: What is matched is the child element of the parent element:
Figure 2:<section id="demo"> <h1>选取#demo第一个子元素p</h1> <p>如果你以为我会被选中变红,那你就猜错了</p> <p>落后的浏览器</p> <p>落后的浏览器</p> <p>落后的浏览器...#demo p:nth-child(1){ color:#f00;}
Figure 3:#demo p:nth-child(2){ color:#f00;}
Figure 4:#demo :nth-child(2){ color:#f00;}
* Let’s change the CSS pseudo-class #demo p:nth-child(2) in Figure #3 to #demo :nth-child(2) , remove the p tag from the selector, and you will find that the first p is also selected and turns red. It seems that this is in line with our normal thinking, because the first p is the second child element of #demo; that is to say, in this DEMO #demo p:nth-child(2) and #demo :nth-child( 2) They are equivalent;
* Do you find this difficult to understand? CSS selectors are queried from right to left, I guess you already know this.
E:nth-child(n) means matching the second child element of the parent element. If the second child element happens to be E, it will be matched;
* I believe now Figure # 2 You can already understand why no elements are selected. Because the first child element of #demo is not p, but an h1, this selector is invalid;* and Figure #3 selector #demo p:nth-child(2) means Matches the second sub-element p of #demo. At this time, the second sub-element of #demo happens to be a p, so it is matched;
* Compared to Figure #2 and Figure #3, in this example #demo :nth-child(2) means directly selecting the second child element of #demo. Regardless of whether this child element is any tag, it will be matched;