Detailed explanation of the use of selectors nth-child and :nth-of-type

This time I will bring you a detailed explanation of the use of the selectors nth-child and :nth-of-type. What are the precautions when using the selectors nth-child and :nth-of-type? The following is a practical case, let’s take a look.

Let’s look at a simple example, first the HTML part:

<section>
    <p>我是第1个p标签</p>
    <p>我是第2个p标签</p>  <!-- 希望这个变红 -->
</section>

Then the CSS code corresponding to the two selectors is as follows:

p:nth-child(2) { color: red; }

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

In the above example, this The effects achieved by the two selectors are consistent. The text of the second p tag turns red:

Although the final effects of the above two demos are the same, Differences between the two selectors are inevitable.

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

1. This is a paragraph element
2. This is The second child element of the parent tag

For the :nth-of-type selector, it means selecting an element:

1. Select the second child element of the parent tag Paragraph sub-element

If we slightly modify the above example, we can see the difference between the two selectors, as shown in the following HTML code:

<section>
    <p>我是一个普通的p标签</p>
    <p>我是第1个p标签</p>
    <p>我是第2个p标签</p>  <!-- 希望这个变红 -->
</section>

Still the same as the above example Consistent CSS test code:

p:nth-child(2) { color: red; }

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

##At this time, the results rendered by the two selectors are different.

p:nth-child(2) The rendering result is not that the text of the second p tag turns red, but the first p tag, which is the second child element of the parent tag.

The performance of p:nth-of-type(2) appears to be very strong, and it dyes the second p tag that you want to render red.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the use of pointer-events in css3

Detailed explanation of the use of focus-within

The above is the detailed content of Detailed explanation of the use of selectors nth-child and :nth-of-type. For more information, please follow other related articles on the PHP Chinese website!