CSS3 selector: Nth-child and: Nth-of-type differences

Indicates that the element is a label and a p:nth-child(2) p second child element , which is two conditions that must be met.

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

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 the 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.

p:nth-of-type(2) represents the second p element under the parent tag , and it is clear that the div span h1 p text in the second label is red, whether it is inserted after the label or the label.

Reference Links:

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: Nth-of-type differences