在CSS里选择父元素下的第几个子元素我们可以用的方法有nth-child 和nth-of-type，刚开始用的时候觉得这两个应该效果的用法应该是一样的，但是为什么CSS会定义两个一样的选择器呢？今天我来讲讲自己的见解，不喜勿喷；
现在来谈谈他们之间的差别：
代码结构如下（1）：
<section>
<p>第1个</p>
<p>第2个</p>
<p>第3个</p>
<p>第4个</p>
</section>
我们现在使用两种方法来测试：
section p:nth-child(2){
color: red;
}
效果：
效果显而易见
现在试一试nth-of-type：
section p:nth-of-type(2){
color: red;
}
毋庸置疑，在第一种结构下，这两种选择器都可以很好的选择到第二个元素。好那么接下来我们来试试第二种结构：
<section>
<div>哈哈哈</div>
<div>呵呵呵</div>
<div>嘻嘻嘻</div>
<p>第1个</p>
<p>第2个</p>
<p>第3个</p>
<p>第4个</p>
</section>
首先我们来试一试nth-of-type的效果：
section p:nth-of-type(2){
color: red;
}
效果：
ok接下来我们来看看nth-type的效果：
section p:nth-child(2){
color: red;
}
效果：
看到这种结果，大家应该知道他们俩的区别在哪里了吧？
第一种father-ele ele：nth-child
咱们单单从字面上来理解：father-ele元素下的ele元素的第n个元素。限制性挺强的，有位置限定，有元素限定，还有在父元素结构里的位置限定，那么咱们来分析一下刚才的代码：
section p:nth-child(2){
color: red;
}
为什么这个样式并没有实现：再来看一下代码结构
<section>
<div>哈哈哈</div>
<div>呵呵呵</div>
<div>嘻嘻嘻</div>
<p>第1个</p>
<p>第2个</p>
<p>第3个</p>
<p>第4个</p>
</section>
ok，现在我来组织一下我的语言，哈哈。
我们来分析一下这个html结构，section下有7个子元素，排行第二的是一个div内容是呵呵呵。
现在来看css代码：他是要找，section地下的第二个元素，还要是p元素，但是呢，这里不满足条件，所以就没有样式的改变。（大家懂我什么意思了吗）
ok我们来看下一种：
section p:nth-of-type(2){
color: red;
}
其实哈，差别就在type上：
这个代码的意思是什么呢，1：section下的p元素，ok找到了，有两个。2：第二个p元素。ok找到了，干掉它，bingo样式改变了。
nth-of-type和nth-child的最大区别是什么呢，就是一个type的区别，一个关注的子元素的位置，一个多了一个类型的限制。
总结：
可能我的语言让大家搞得有点艰涩难懂，哎，我还是一个前端的小鸟，等我到变成一个老鸟的时候可能我说的话会更加透彻，希望可以帮助到大家，谢谢