<section>
<p>我是第1个p标签</p>
<p>我是第2个p标签</p>
</section>
然后对应2个选择器对应的CSS代码如下：
p:nth_child(2) { color:red;}
// p:nth-of-type(2) { color:red;}
两种对应的效果都是这样的：
对于:nth-child选择器有两点需要说明：
1，这个是个段落元素
2，这个是父级元素的第二个孩子
而对于：nth-of-type选择器，意味着选择一个元素如果：
1，选择父级元素的第二个 段落 子 元素
如果把上面的代码稍微修改一下：
<section>
<div>我是一个普通的div标签</div>
<p>我是第一个p标签</p>
<p>我是第二个p标签</p>
</section>
这个时候，p:nth-child(2) { color:red;} 并没有选择上任何的元素 ，所以并没有变化。
p:nth-of-type(2) { color:red;} 的显示结果是：
css3选择器：nth-child和nth-of-type之间的差别
原文：http://www.cnblogs.com/agansj/p/6024108.html