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>
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 a parent element The second <p> element of <div>. Here is selected, will turn red-- <p> I am 3rd paragraph </p></div>
CSS3 selector: Nth-child vs: Nth-of-type Difference
Css3::nth-child and: Nth-of-type difference