CSS3中:伪类选择器nth-child和:nth-of-type的区别

:nth-child和:nth-of-type都是CSS3中的伪类选择器，功能在正常情况下用起来发现也没有什么区别，不过既然官方分了两种选择器就必然有它们的不同

我们先来看看正常的使用，假如html结构如下

<div>
    <p>第1个p标签</p>
    <p>第2个p标签</p> 
</div>

我们想让第二个<p>元素变红，分别使用p:nth-child(2) {color: red;} 和 p:nth-of-type(2) {color: red;} 效果是一样的，并没有半毛钱不同

好了我们稍微改动一下DOM结构

<div>
    <div>我是来打脸的</div>
    <p>第1个p标签</p>
    <p>第2个p标签</p> 
</div>

我们再用p:nth-child(2) {color: red;} 和 p:nth-of-type(2) {color: red;} 来测试选中的效果，结果p:nth-child(2) {color: red;}选中的是第一个<p>元素，好了发现了不同我们就来分析下原因。

:nth-of-type为什么要叫:nth-of-type？因为它是以”type”来区分的。也就是说：ele:nth-of-type(n)是指父元素下第n个ele元素， 这个就是不管你父元素下有多少其他元素，我只要<p>元素的第二个
而ele:nth-child(n)是指父元素下第n个元素，且是ele的元素，这样就导致了选择第一个<p>元素，因为它既是<p>元素又是父元素下的第二个元素