CSS3 selector about: Nth-child and: Introduction to the Nth-of-type difference

First,: Nth-child

1.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>p>p:nth-child (2) {    color:red;} </style><p>    <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 <p>. This is selected and will turn red. -    <p> I am the 3rd paragraph </p></p><p>    <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></p>

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 <p> plus a space to prevent it from taking :nth-child effect.

<style>p:nth-child (2) {//p+ space, select color:red based on parent element only    ;} </style><p>    <p> I am the 1th paragraph </p>    <span> I am 1th text </span><!--eligible--    <p> I was 2nd paragraph </p></p>

Second,: Nth-of-type

2.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>p>p:nth-of-type (2) {color:red;} </style><p> <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 <p>. Here is selected, will turn red--<p> I am 3rd paragraph </p></p><p> <p> I am 1th paragraph </p> <blockquote> 1th citation With </blockquote> <p> I am the 2nd paragraph </p><!--eligible: 1, is a specific element type <p>,2, is the parent element <p> the second <p> element. Here is selected, will turn red--<p> I am 3rd paragraph </p></p>