This article mainly introduces the CSS3 selector: Nth-child and: Nth-of-type between the difference, very practical value, the need for friends can refer to the next
Let's look at a simple example, first of all, the HTML section:
<section> <p> I'm 1th p tag </p> <p> I'm 2nd p tag </p> <!--want this to turn red--></ Section>
Then the two selectors corresponding to the CSS code are as follows:
P:nth-child (2) {color:red;}
P:nth-of-type (2) {color:red;}
In this example, the two selectors achieve the same effect, and the second P-label text becomes red:
Although the final effect of the above two demos is the same, there is a certain difference between the two selectors.
For :nth-child
selectors, 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 :nth-of-type
selectors, it means selecting an element:
1. Select the second segment of the parent tag Lazi element
We can see the difference between the two selectors by making a slight change to the above example, the following HTML code:
<section> <p> I am a normal p tag </p> <p> I am the 1th p tag </p> <p> I am the 2nd p tag </p > <!--want this to turn red--></section>
or the CSS test code that is consistent with the example above:
P:nth-child (2) {color:red;}
P:nth-of-type (2) {color:red;}
This is when the two selectors render the result differently.
P:nth-child (2) The result of rendering is not the second P-label text being red, but the first P-tag, which is the second child element of the parent tag.
P:nth-of-type (2) showed a strong performance, which dyed the second P-tag that he wished to render.