nth-of-child和nth-of-type的区别

p:nth-of-child(2)     翻译过来就是，必需是p元素，并且是父标签的第二个元素，满足以上两个条件，这些样式才会渲染。

p:nth-of-type(2)     翻译过来就是，必需是p元素，并且是父标签下的第二个p标签，满足以上条件才会渲染样式。

代码测试：

HTML:

<div class=”demo”>

　　<p>你好吗?</p>

　　　<p>还行</p>

</div>

CSS:

.demo p:nth-of-child(2){color:red}

.demo p:nth-of-type(2){color:red}

一样的效果，第二行变红

HTML:

<div class=”demo”>

　　<span>qqq</span>

　　<p>你好吗?</p>  //nth-of-child(2) 变红(是p元素，并且是父标签下的第二个元素)

　　　<p>还行</p>   //nth-of-type(2)  变红（是p元素，并且是父标签下的第二个p元素）

</div>

HTML:

<div class=”demo”>

　　　<h4>sdsdsd</h4>

　　<span>qqq</span>//nth-of-child(2) 不变红(不是p元素，并且是父标签下的第二个元素)

　　<p>你好吗?</p>

　　　<p>还行</p>   //nth-of-type(2)  变红（是p元素，并且是父标签下的第二个p元素）

</div>