1、:nth-child和:nth-of-type都是css3中的伪类选择器，其作用近似却又不完全相同，其实理解了这两个选择器的使用，其他的伪类选择器使用起来也就自然得心应手、游刃有余了。
2、demo：我们创建一个父级元素，然后为它的子元素修改样式：
html：（我们修改第二个p标签颜色为红色）
<section>
<p>我是第1个p标签</p>
<p>我是第2个p标签</p> <!-- 希望这个变红 -->
</section>
css：
p:nth-child(2) { color: red; }
p:nth-of-type(2) { color: red; }
看一下效果：（下面两个选择器实现的效果相同）
说明：尽管上面实现的效果是相同的，但是他们之间一定存在用法上的差异。
3、首先我们简单的来说下上面两个选择器的含义：
1）对于p:nth-child(2)选择器，有两个限定条件
- 我们要选中的元素是个段落元素
- 选中的元素是父级元素的第二个孩子
2）对于p:nth-of-type(2)选择器，则意味着：
- 选中的元素是父级元素的第二个段落子元素
说明：什么意思呢，也就是说p:nth-of-type(2)选择器是在父级元素的所有段落元素中从上到下找出第二个段落元素并选中，选定范围一定是在段落元素中，而p:nth-child(2)选择器则是直接先找出父元素的第二个子元素，然后如果它是段落元素则选中，不是则不选中。
4、我们将上面的代码做简单的修改：（我们还是选中第二个p标签，然后修改其颜色：）
<section>
<div>我是div标签</div>
<p>我是第1个p标签</p>
<p>我是第2个p标签</p> <!-- 希望这个变红 -->
</section>
1）css：（首先使用:nth-child选择器）
p:nth-child(2) { color: red; }
看下效果：
说明：可见我们选中的是第一个p标签，正如我们上述所说，我们选中了父级元素的第二个子元素，然后判断第二个子元素是否是p标签，是，则选中该元素，并修改其样式。
2）css：（首先使用:nth-of-type选择器）
p:nth-of-type(2) { color: red; }
看下效果：
说明：使用:nth-of-type选择器则正常的选中了我们的第二个p标签，使用时先是将父级元素的所有p标签子元素查找到，然后找出第二个并选中修改样式，如果这里子元素只有一个，则不会进行渲染。
5、我们将上面的特殊情况演示一遍：
1）首先是使用:nth-child选择器，我们将代码做简单的修改：
<section>
<div>我是第1个div标签</div>
<div>我是第2个div标签</div>
<p>我是第2个p标签</p> <!-- 希望这个变红 -->
</section>
p:nth-child(2) { color: red; }
看下效果：
说明：上面的样式并没有发生任何的变化，因为我们使用:nth-child选择器先找到父元素的第二个子元素，然后判断是否满足是p标签，可见是一个div标签不满足条件，所以并没有选中，可以改成div:nth-child(2) { color: red; }进行选中。
2）下面我们是用:nth-of-type选择器试试：
p:nth-of-type(2) { color: red; }
看下效果：
说明：还是没有效果，因为我们要找到父元素的第二个p标签子元素，因为我们这里只有一个p标签，所以都不满足条件，所以并没有效果，可以改成p:nth-of-type(1) { color: red; }进行选中父元素的第一个p标签子元素。
你要去做一个大人，不要回头，不要难过。
“可能很多事情都在冥冥之中早有安排。”
