First,: Nth-child1.1 Description
: the Nth-child (n) selector matches the nth child element that belongs to its parent element, regardless of the type of the element . n can be a number, a keyword, or a formula.
Note: If the nth child element differs from the selected element type, the style is invalid!
1.2 Example
<style>div>p:nth-child (2) { color:red;} </style><div> <p> I am the 1th paragraph </p> <p> I am the 2nd paragraph </p><!--eligible: 1, is <p > element, 2, the second element of the parent element <div>. This is selected and will turn red. - <p> I am the 3rd paragraph </p></div><div> <p> I am the 1th paragraph </p> <span> I am the 1th text </span><!--not eligible: Not <p> element, not selected-- <p> I am the 2nd paragraph </p></div>
1.3 Improvements
If you want the second <span>
of the above to take effect to remove the child element, <p>
write a parent element <div>
plus a space to prevent it from taking :nth-child
effect.
<style>div:nth-child (2) {//div+ space, select color:red based on parent element only ;} </style><div> <p> I am the 1th paragraph </p> <span> I am 1th text </span><!--eligible-- <p> I was 2nd paragraph </p></div>
Second,: Nth-of-type2.1 Description
: the Nth-of-type (n) selector matches each element of the nth child element of a particular type that belongs to the parent element. n can be a number, a keyword, or a formula.
2.2 Example
<style>div>p:nth-of-type (2) { color:red;} </style><div> <p> I am the 1th paragraph </p> <p> I am the 2nd paragraph </p><!--eligible: 1, is a specific element type <p>,2, is the second <p> element of the parent element <div>. Here is selected, will turn red-- <p> I am 3rd paragraph </p></div><div> <p> I am the 1th paragraph </p> <blockquote> 1th references </blockquote> <p> I am the 2nd paragraph </p><!--eligible: 1, is a specific element type <p>,2, is the second <p> element of the parent element <div>. Here is selected, will turn red-- <p> I am 3rd paragraph </p></div>
This article from "Do not know not to ask" blog, please be sure to keep this source http://mazey.blog.51cto.com/12997993/1941569
CSS3 selector: Nth-child vs: Nth-of-type Difference