: The difference between Nth-child and: Nth-of-type

For: Nth-child:

Let's look at the following section of code:

<style> P:nth-child (1) {border:1px solid;} </style><div class= "C1" ><div class= "C11" ><p class= "pp" >1</p><p class= "pp" >2 </p></div><p class= "pp" >3</p><p class= "pp" >4</p></div><div class= "C2 "><p class=" pp ">5</p><p class=" pp ">6</p></div>

Operating effect:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/6E/AE/wKioL1WCs4jy5OB5AABM5pDPKYc788.jpg "title=" 1.png " alt= "Wkiol1wcs4jy5ob5aabm5pdpkyc788.jpg"/>

650) this.width=650; "src="/e/u261/themes/default/images/spacer.gif "style=" Background:url ("/e/u261/lang/zh-cn/ Images/localimage.png ") no-repeat center;border:1px solid #ddd;" alt= "Spacer.gif"/> Then, tweak the code a little bit:

<style> P:nth-child (1) {border:1px solid;} </style><div class= "C1" ><p class= "pp" >3</p><div class= "C11" ><p class= "pp" >1 </p><p class= "pp" >2</p></div><p class= "pp" >4</p></div><div class= "C2 "><p class=" pp ">5</p><p class=" pp ">6</p></div>

Operating effect:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/6E/B2/wKiom1WCstDSqg1kAABaH8HKSAI734.jpg "title=" 1.png " alt= "Wkiom1wcstdsqg1kaabah8hksai734.jpg"/>

Conclusion:

For the P :nth-child selector, in simple vernacular, it means selecting an element if:

1. 1. This is a paragraph element.

   2. This is the second child element of the parent tag

For: Nth-of-type:

<style>p:nth-of-type (1) {border:1px solid #ff0000;} </style><div class= "C1" ><div class= "C11" ><p class= "pp" >1</p><p class= "pp" >2 </p></div><p class= "pp" >3</p><p class= "pp" >4</p></div><div class= "C2 "><p class=" pp ">5</p><p class=" pp ">6</p></div>

Operation Result:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M02/6E/AE/wKioL1WCtdfBFftUAAB44r9rh_c977.jpg "title=" 2.png " alt= "Wkiol1wctdfbfftuaab44r9rh_c977.jpg"/>

Conclusion:

    p:nth-of-type(1)represents the 1th under a parent tagpelement, regardless of the element before the P element. such as the following:

<style>p:nth-of-type (1) {border:1px solid #ff0000;} </style><div class= "C1" ><div class= "C11" ><p class= "pp" >1</p><p class= "pp" >2 </p></div><span>something</span><div>something</div><p class= "pp" >3 </p><p class= "pp" >4</p></div><div class= "C2" ><p class= "pp" >5</p><p Class= "pp" >6</p></div>

Operation Result:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/6E/B2/wKiom1WCtV-REilJAACILahdb8o843.jpg "title=" 3.png " alt= "Wkiom1wctv-reiljaacilahdb8o843.jpg"/>

Comparison: Differences between Nth-child and: Nth-of-type:

P:nth-child (1), refers to the element must be a P element, and in its parent element is the first, that is, its parent element of the first direct child node. If any non-P element appears before it, the selector fails.

P:nth-of-type (1), which means that the element must be a P element, and the first of all P child elements of its parent element (non-P child elements are ignored), regardless of how many non-P child elements appear before the element.

Of course, in: Nth-child,: Nth-of-type action selector type is not only the tag Selector, can be other CSS selectors. In the example above, p: Nth-child, p: Nth-of-type can be changed to Class selector. PP: Nth-child,. pp: Nth-of-type.

This article is from the "Isymu" blog, make sure to keep this source http://isymu.blog.51cto.com/1460577/1663331

: Differences between Nth-child and: Nth-of-type