Home > Article > Web Front-end > Compare the differences between CSS3 selectors :nth-child and :nth-of-type
This article mainly introduces the difference between CSS3 selectors: nth-child and :nth-of-type. It is of great practical value. Friends in need can refer to it.
Let’s look at a simple one first. 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, the effects achieved by these two selectors are consistent, and 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 CSS test code as the above example:
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) is very strong, it dyes the second p tag that you want to render red.
The above is the detailed content of Compare the differences between CSS3 selectors :nth-child and :nth-of-type. For more information, please follow other related articles on the PHP Chinese website!