The difference between Nth-child and nth-type-child in CSS selectors

In the CSS to select the parent element under the sub-elements we can use the method has Nth-child and Nth-of-type, just beginning to think that the two should be the same effect of the usage should be the same, but why CSS defines two identical selectors? Today I speak of my own opinion, do not like to spray;

Now let's talk about the difference between them:

The code structure is as follows (1):

< Section>    <P>1th One</P>    <P>2nd One</P>    <P>3rd One</P>    <P>4th One</P></ Section>

We now use two methods to test:

Section p:nth-child (2) {            color: red;        }

Effect:

The effect is obvious

Now try Nth-of-type:

Section   p:nth-of-type (2){            color: red;        }

Undoubtedly, in the first structure, both of these selectors can be well selected to the second element. Well, then let's try the second structure:

< Section>    <Div>Ha ha haha</Div>    <Div>Oh, huh?</Div>    <Div>Hey, Hee.</Div>    <P>1th One</P>    <P>2nd One</P>    <P>3rd One</P>    <P>4th One</P></ Section>

First, let's try a Nth-of-type effect:

Section   p:nth-of-type (2){            color: red;        }

Effect:

OK next we look at the effect of Nth-type:

Section p:nth-child (2) {            color: red;        }

Effect:

See this result, you should know the difference between the two of them?

The first kind of Father-ele Ele:nth-child

Let's just literally understand: the nth element of the ele element under the Father-ele element. Very restrictive, with a positional limit, with element qualification, and in the structure of the parent element of the position, then let's analyze the code just now:

Section p:nth-child (2) {            color: red;        }

Why this style is not implemented: Take a look at the code structure

<section>    <div> hahaha </div>    <div> heh hehe </div> <div>    hee hehe </div>    <p> 1th </p>    <p> 2nd </p>    <p> 3rd </p>    <p> 4th </p ></section>

OK, now let me organize my language, haha.

Let's analyze this HTML structure, under section there are 7 sub-elements, the second is a div content is hehe.

Now look at the CSS code: he's looking for the second element under the section, and the P element, but it doesn't meet the conditions, so there's no change in style. (Do you know what I mean?)

Ok let's look at one of the following:

Section P:nth-of-type (2) {            color: red;        }

Actually ha, the difference is on type:

What does this code mean, the P element under 1:section, OK found, there are two. 2: Second P-element. Ok found, kill it, bingo style changed.

What is the biggest difference between Nth-of-type and Nth-child, is the difference between a type, the position of a child element of concern, and the limitation of one more one.

Summarize:

Maybe my language makes us a bit difficult to understand, hey, I am a front-end bird, and so I become a veteran of the time may I say will be more thorough, hope can help everyone, thank you

The difference between Nth-child and nth-type-child in CSS selectors