nth-child()与nth-of-type()区别

首先需要注意的是，css中根本没有 nth-of-child()的写法，本人有时会写成这种形式，导致效果出不来。
其次，不管是nth-child(n)，还是nth-of-type(n)，两者()中的n都是从数字1开始计算的，切记！
下面说说区别： nth在英文中是 ‘第几’ 的意思，nth-child就是父元素的第几个孩子，这里边有两层含义，一：父元素的孩子是谁(也就是你想找谁，是div，还是h3，或者是p)，二：这个孩子在家排行第几（不管他前面的兄弟是什么类型的元素，依次排下来)。两者必须匹配。
下面看个例子：


父元素div.wrapper有5个儿子，分别是h3、div.tittle、ul、div.summary、p。
div.title排行第二，所以使用nth-child时，n=2，即nth-child(2)，同理div.summary写法是：nth-child(4)。
nth-of-type按元素类型进行分类，你是该类型的第几个，就写几。
div.tittle与div.summary都属于div，.title排第一，.summary排第二，所以分别是
nth-of-type(1)和nth-of-type(2)。