详解:nth-child()和:nth-of-type()选择器用法

一、:nth-child()选择器

定义和用法

:nth-child(n) 选择器匹配属于其父元素的第n个子元素，不论元素的类型。

注解：注意这里的不论元素类型，我之前就老出错，在父元素里的所有子元素（同级），不论类型一下排下来的索引。而不是只有p标签或者span标签里的第几个，这个和下面的选择器做对比可以更好的理解。

n 可以是数字、关键词或公式。

数字：p:nth-child(1)这个里边的数字从1开始，这个地方容易出错，记住是1；

关键字：p:nth-child(odd)，奇数（odd）和偶数（even）是可以作为关键字使用，用于相匹配的子元素，其索引是奇数或偶数（该索引的第一个子节点是1）；

公式：p:nth-child(3n+1)，使用公式（an+ b）.描述：a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量。

二、:nth-of-type()选择器

定义和用法

:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。

注解：这里和上面的选择器有了区分度，可以更好的记住这两个选择器的用法，这个选择器是同类型，p就是父元素下所有的同级兄弟p元素。

n 可以是数字、关键词或公式。

例子与上述相似，没有再叙述。

两者不同就是是否是同类型的标签（元素）。作用有很大区别，易出错。