在日常工作中，前端写css不免碰到要在一个在父类中找到其第n个子元素（或者是带class的第n个子元素），遇到这样的情况首先想到的是用伪类选择器：nth-child。但是在实际的操作中结果似乎和我们要的不尽一致，其实是你混淆了:nth-child和:nth-of-type的区别~
:nth-child和:nth-of-type都是CSS3中的伪类选择器，其作用近似却又不完全一样，对于不熟悉的人对其可能不是很区分，下面我简单的给大家介绍下二者的区别。
先看一个简单的例子：
<section>
<p>this the first p</p>
<p>this the second p</p><!--希望这个变红-->
</section>
然后分别用两个选择器来对上述代码进行修饰
p:nth-child(2){ color: red; }
p:nth-of-type(2){ color: red; }
上面这个例子中，这两个选择器所实现的效果是一致的，第二个p标签的文字变成了红色。效果如下
虽然上面的demo的结果一致，但两个选择器之间存在的差异是必然的。
对于nth-child所选择的元素满足两点：1、这是个段落元素 2、这是父标签下第二个子元素
而对于nth-of-type只有一点：选择父标签的第二个段落子元素
字面上有点难理解。我把上述demo稍加改动，就可以看到它们俩之间的差异了，代码如下：
<section>
<div>this is a div</div>
<p>this the first p</p>
<p>this the second p</p><!--希望这个变红-->
</section>
css还是上述css代码：
p:nth-child(2){ color: red; }
p:nth-of-type(2){ color: red; }
使用nth-child(2)的结果与我们想象完全不一致，本打算将第二个p元素的颜色变红，无奈颜色变红的却是第一个p元素，这个p元素正是父元素下的第二个子元素。效果如下：
然而使用nth-of-type(2)的结果令人满意，它把第二个p元素颜色变红了，效果如下：
对照上面两个选择器的语义，此处的效果表现差异不难理解。
对于p:nth-child(2)表示这个元素要是p标签，且是第二个子元素，是两个必须满足的条件。于是，就是第一个p
标签颜色为红色（正好符合：p标签，第二个子元素）。如果在div标签后面再插入个span标签，如下：
<section>
<div>this is a div</div>
<span>this id a span</span>
<p>this the first p</p>
<p>this the second p</p><!-- 希望这个变红 -->
</section>
那么p:nth-child(2)将不会选择任何元素。
而p:nth-of-type(2)表示父标签下的第二个p元素，显然，无论在div
标签后面再插入个span标签，还是h2标签，都是第二个p标签中的文字变红。
用一个比喻来解释上面的例子：nth-child(2)--父亲的几个儿子在比赛跑步，如果你是第二名，且是男孩，就给你奖励。而
nth-of-type(2)--管你是第几名，你的前面有且只有一个男孩你就会获得奖励。