CSS3中伪类选择器nth-child(n)和nth-of-type(n)的区别

:nth-child(n)

该选择器匹配父元素中的第 n 个子元素，元素类型没有限制。
n 可以是一个数字，一个关键字，或者一个公式。
注意:该选择器匹配同类型中的第 n 个同级兄弟元素。

:nth-of-type(n)

该选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
n 可以是数字、关键词或公式。

注意：下标n是从1开始

实例1：
获取第一个li标签

li:nth-child(1){
			background-color: red;
}
/*li:nth-of-type(1){
			background-color: red;
}*/

使用nth-child和nth-of-type和好像没有区别，都能达到一样的效果：

可当我们在li前面插入一个元素，就会发现使用nth-child(1)获取不到第一个li

使用 li:nth-child(2)才找到我们想要的第一个li元素

这是因为 E:nth-child(n)匹配的是与E同级的所有元素中的第n个，且类型为E的元素，该示例中的div与li同级，第一个元素是div而不是li,所以 li:nth-child(1) 既不能匹配到第一个元素，也不能匹配到第一个li,第一个li是同级的第二个元素，所以 li:nth-child(2) 匹配第二个元素且类型为li的元素，可以找到第一个li。
显然，这在使用中会带来不便，不符合我们找到li元素中的第一个的本义。
遇到在这种情况时，E:nth-of-type(n) 更符合我们的需求，它会先将所有的E同级的所有的E提取出来，再选中其中的第n个。
示例如下：

在该示例中，li:nth-of-type(1) 是先将所有的同级li取出，然后选中第一个，不管同级的是否有其他元素，它只选择同级元素中的li 的第一个，不受其他元素的影响。

相同点

:nth-child(n) 和 :nth-of-type(n) 中的n都可以是数字、关键词或公式
数字： 就是匹配到符合条件的元素中的第n个
关键字： 常用的有odd和even
odd表示奇数，even表示偶数
例：使奇数行的li背景颜色为蓝色，偶数行的li背景为红色

公式：
例：使li的奇数行背景为红色，偶数行背景为蓝色