首先要说明的一点是：css中的伪类选择器还是少用为妙，复杂的css选择器（层级关系较深，伪类等）的性能并不好，主要应该影响的还是浏览器渲染时候的回流（reflow）和重绘（repain）的等的性能（个人理解）。
然后要讲正题啦！
nth-of-type和nth-child这两个选择器是很容易混淆的两个伪类选择器, 功能都是用来选择父元素的第几个孩子。
nth-child
假设有一个无序列表如下：
<ul><li><a href="#">United Kingdom</a></li><p><a href="#">china</a></p><li><a href="#">Germany</a></li><p><a href="#">United Kingdom</a></p><li><a href="#">Finland</a></li><li><a href="#">Russia</a></li><li><a href="#">Spain</a></li><li><a href="#">Poland</a></li></ul>
我们需要将它的偶数位置的li元素中a标签内容的颜色设置成红色
<style>li:nth-child(2n)>a {color: red;}</style>
效果图如下：
这里要注意的是nth-child(2n)中的n是从0开始的，而ul列表的第一个元素的index是1。因为 li:nth-child(2n)选择的是父元素ul的第0,2,4,6,…个子元素（这里不存在第0个元素，所以实际上是ul的第2,4,6,…位置的子元素），并且（着重注意），也就是只能选择上ul的偶数位置的li元素，那么这个偶数位上如果是除li外的其他元素，是选择不上的。因此这里的第2个和第4个p元素并没有被选上，这也是我们在实际开发中经常发现nth-child伪类选择器失效的情况。
nth-of-type
如果用nth-of-type来实现上面的功能
<style>li:nth-of-type(2n)>a {color: red;}</style>
得到的效果是下面这样的：
我们可以发现，之前没有被选上的第2个li元素在这里被选上了。这是因为nth-of-type选择的是父元素的第偶数个li元素，也就是无论中间有没有其他的元素都不管，我们关心的仅仅是li元素在所有li元素中它排第几，而不关心它是它父元素的第几个子元素。
因此nth-child和nth-of-type的区别就一目了然了，nth-child相对来说更加严格，因此使用nth-of-type会规避掉一些选择不上的问题。
还有一个需要注意的问题是：如果我们需要选择父元素的第几个同类元素，而不关心这个元素是什么元素的话，可以进行父标签层级的限制，而不是当前元素层级的限制。
ul :nth-of-type(2n)>a {color: red;}
<ul><li><a href="#">United Kingdom</a></li><p><a href="#">china</a></p><li><a href="#">Germany</a></li><p><a href="#">United Kingdom</a></p><p><a href="#">United Kingdom</a></p><li><a href="#">Finland</a></li><li><a href="#">Russia</a></li><p><a href="#">United Kingdom</a></p><li><a href="#">Spain</a></li><li><a href="#">Poland</a></li></ul>
采用父标签层级限制的话，一定要注意的是后面的空格，如果不加空格的话将看不到任何效果。这里得到的效果图如下：
也就是说ul标签下面的所有偶数位置的同类子标签（只是儿子，不包含儿子的儿子。。。）会被选取到。
综上所述：使用nth-of-type伪类选择器是最不容易出错的。
参考：
鑫旭大神的文章：/wordpress//06/css3%E9%80%89%E6%8B%A9%E5%99%A8nth-child%E5%92%8Cnth-of-type%E4%B9%8B%E9%97%B4%E7%9A%84%E5%B7%AE%E5%BC%82/
