: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的奇数行背景为红色，偶数行背景为蓝色
如果觉得《CSS3中伪类选择器nth-child(n)和nth-of-type(n)的区别》对你有帮助，请点赞、收藏，并留下你的观点哦！
