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!