nth-child()和nth-of-type()的区别

nth-child(1)等于first-child
nth-of-type(1)等于first-of-type
如图所示：

图1-1 图1-2

需要注意的是，最好指定父级元素，如.ct>p，要不然，不同级的子级元素都会被选中。如图2所示：

图2

两者还有一处不同是，如果选择器这样写

.ct>p:nth-child(2){
         color:red;
}

那么这个元素要满足两个条件才会被选中，1是他是.ct的子标签的第二个；2是他还要是<p>标签。两个条件的关系是且，缺一不可。
如图3所示：第一个元素是<div>，不符合要求，所以没有被选中。

图3

如图4，改选第二个子元素，就符合选择器的要求了。

图4

而nth-of-type()，就没这个要求了。
拿上面的例子来说，如果第一个元素不是<h3>的话，他会在同父级元素下（选择器上设置了父级）继续找<h3>标签，直到找到为止。如果没有设置父级，那么他会在每个子级中寻找，如图2所示。
update，发现一个问题，就是nth-of-type()前如果是类名的话，他也要符合两个条件，一是类名相同，二是在其相同标签中位于第X位，才能被选择器选中。
如下图所示：

图5 图6

谢谢观看，如有不足之处，还请指出。