The difference between Nth-of-type and Nth-child

Look at CSS3 when found a nth-of-type selector, found that at ordinary times have not seen the use, on the study of a bit, the information is this:

: The Nth-of-type (n) selector matches each element of the nth child element of a particular type that belongs to the parent element.

Looks a lot like nth-child.

: The Nth-child (n) selector matches the nth child element that belongs to its parent element, regardless of the type of the element.

So what's the difference between the two? Test it.

Html:

        <Divclass= "box">Box:            <P>I'm P1.</P>              <P>I'm p2.</P>        </Div>        <Divclass= "pox">pox:            <P>I'm P1.</P>                    <P>I'm p2.</P>        </Div>        

Css:

<style>. Box{margin:100px;float: Left; }. Pox{margin:100px 0 0 60px;float: Left; }. Pox P:nth-child (1){Color:Red; }. Box P:nth-of-type (1){Color:Red; }</style>

The result looks the same:

Here's a little bit of changing HTML:

         <Divclass= "box">Box:<Div>I'm div1.</Div>            <P>I'm P1.</P>            <Div>I'm div2.</Div>            <P>I'm p2.</P>        </Div>        <Divclass= "pox">pox:<Div>I'm the Div.</Div>            <P>I'm P1.</P>            <Div>I'm div2.</Div>            <P>I'm p2.</P>        </Div>        

Results:

It is found here that Nth-child does not work, which is why?

In fact P:nth-of-type (n) refers to the parent element under the nth P element, and P:nth-child (n) refers to the parent element under the nth element and this element is P, if not, the selection fails.

The first child element under Pox here is a div instead of p, so the selection fails. If you want to P1 red, P1 is pox under the second sub-element should choose Nth-child (2), should be replaced by:

. Pox P:nth-child (2) { color: red;}

Results:

The difference between Nth-of-type and nth-child