CSS3 :nth-child(n) syntax explanation_html/css_WEB-ITnose

Syntax:

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 id="选取ul第一个子元素li">选取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 id="选取-demo第一个子元素p">选取#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;