实例：
首先创建一个HTML结构
<div class="post"> ???<p>我是文章的第一段落</p> ???<p>我是文章的第二段落</p></div>
接下来使用：.nth-child和nth-of-type选择并改变其文字颜色
.post>p:nth-child(2){ ???????????color: red; ???????}.post>p:nth-of-type(2){ ???????????color: red; ???????}现在在段落一前面加上一个标题1
<div class="post"> ???<h1>我是标题1</h1> ???<p>我是文章的第一段落</p> ???<p>我是文章的第二段落</p></div>
再次使用：.nth-child和nth-of-type选择并改变其文字颜色
.post>p:nth-child(2){ ???????????color: red; ???????} .post>p:nth-of-type(2){ ???????????color: red;
}nth-child 包含两层意思，首先是一个段落元素，这个段落元素的父元素“div”的第二份子元素，而“nth-of-type”的意思是选择父元素的段落2
如果在“h1”标题后面添加h2标题，此时“p:nth-child(2)”将无法选择任何元素，以为此时“div”的第二个元素并不是段落一“p”所以无法选择任何元素。但“p：nth-of-type(2)”仍然能正常工作，因为选择的始终是“div”中的第二个段落“p”
切记切记 “nth-child”选择的是父元素的子元素，这个子元素并没有指定确切类型，同时满足两个条件时，方能有效果：其一是子元素，其二是子元素刚好处在哪个位置上（也就是说所有子元素中位置为nth-child括号内指定的数字，且类型为nth-child前的元素类型生效，否则不生效）；“nth-of-type”选择的是某父元素的子元素，而且这个元素是指定类型（也就是说子元素类型为指定的类型中排在括号内指定的数字的节点）
真的绕口，还是看示例吧。。。。。。。。
css3中的nth-child和nth-of-type的区别
原文地址：http://www.cnblogs.com/lrgupup/p/7613126.html