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

<section>

<p> I am the 1th p tag </p>

<p> I am the 2nd p tag </p>

</section>

Then the corresponding CSS code for the 2 selectors is as follows:

P:nth_child (2) {color:red;}

P:nth-of-type (2) {color:red;}

The two corresponding effects are the same:

For: The Nth-child selector has two points to explain:

1, this is a paragraph element.

2, this is the second child of a parent element

For: The nth-of-type selector means selecting an element if:

1, select the second paragraph Child element of the parent element

If you change the above code a little bit:

<section>

<div> I am an ordinary div tag </div>

<p> I was the first P tag </p>

<p> I am the second P tag </p>

</section>

At this time, P:nth-child (2) {color:red;} did not select any of the elements, so it did not change.

P:nth-of-type (2) {color:red;} Displays the result:

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