Home  >  Article  >  Web Front-end  >  CSS3 :nth-child(n) syntax explanation_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 11:38:351458browse

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>选取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;

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn