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; }

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!