CSS3 selector: Nth-child and: Differences between Nth-of-type

CSS3 selector: Nth-child and: Differences between Nth-of-type This post was posted on June 21, 2011, Tuesday, 23:04, classified as CSS related. Read 57,546 times, 143 times today

by Zhangxinxu from http://www.zhangxinxu.com
This address: http://www.zhangxinxu.com/wordpress/?p=1709

One, deep breathing, direct content

: Nth-child and: Nth-of-type are CSS3 in the pseudo-class selector, its role is similar but not exactly the same, for unfamiliar people may not be very different, this article will introduce the difference between the two, in order to facilitate the correct use of both types of selectors.

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 p the second label's text becomes red, as follows (truncated from IE9):

You can really click here:: Nth-child test Demo1:nth-of-type Test Demo1

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 if:

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 if:

1. Select the second segment of the parent tag Lazi element

:nth-of-typeSelector, uh ... What do you say? less restrictive conditions.

We can see the difference between the two selectors by making a slight change to the above example, the following HTML code:

<section>    <div> I am a normal div tag </div>    <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)Tragedy, the result of rendering is not the second p label text Red, but the first p label, which is the second child element of the parent tag. The following effects:

You can really click here:: Nth-child test Demo2

p:nth-of-type(2)The performance looks very strong, it will want to render the second p label dyed red, as follows:

You can really click here:: Nth-of-type test Demo2

Comparing the semantics of the above two selectors, the difference in performance here is not difficult to understand.

For p:nth-child(2) this element to be a p label, and the second child element, two conditions must be met. So, the first p label color is red (just match: P tag, second child element). If you div insert a label after the label span , the following:

<section>    <div> I'm a normal div tag </div>    <span> I'm a regular span tag </span>    <p > I am 1th p tag </p>    <p> I am 2nd P tag </p>  <!--want this to turn red--></section>

Then p:nth-child(2) no elements will be selected.

Instead p:nth-of-type(2) of representing the second element under the parent tag p , it is clear that the div span h1 text in the second label is red, whether you insert a label or a label after the label p .

The difference between the two is a realistic analogy with family planning: The former is a second child and a girl, fine! The latter is the tube of his first few births, the second born girl, fine!

Original: Http://www.zhangxinxu.com/wordpress/2011/06/css3%E9%80%89%E6%8B%A9%E5%99%A8nth-child%E5%92%8Cnth-of-type%E4 %b9%8b%e9%97%b4%e7%9a%84%e5%b7%ae%e5%bc%82/

CSS3 selector: Nth-child and: Differences between Nth-of-type