Home > Article > Web Front-end > CSS3 :nth-child(n) syntax explanation_html/css_WEB-ITnose
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;}* Except for lte IE8 browser, you can see the first An li is matched, and the text is red;
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;}* Is the appeal code allowed? Do you think the first p element will be matched? If you really think so, you are really wrong, no element here will be matched;
Figure 3:#demo p:nth-child(2){ color:#f00;}* Change the CSS pseudo-class in Figure #2# Change demo p:nth-child(1) to #demo p:nth-child(2) You will find that the first p is selected and turns red, why? Don’t worry, let’s take a look below;
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;