Selector Nth-child and: the use of Nth-of-type

This time to bring you the selector nth-child and: Nth-of-type of the use of detailed, using the selector nth-child and: What are the considerations of Nth-of-type, the following is the actual case, together to see.

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.

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

CSS3 pointer-events use of the detailed

Focus-within the use of a detailed