css选择器nth-child(n)、first-child、last-child

> 1：nth-child(n)选择器匹配父元素中的第n个子元素。

1: nth-child(3)选择列表的第三个元素

p:nth-child(3){
background：#ccc;
}

2: nth-child(2n) 选择列表中的偶数标签 2 4 6 8
nth-child(2n-1) 选择列表中的偶数标签 1 3 5 7

p:nth-child(2n/2n-1){
background：#ccc;
}

3：nth-child(n+3) 表示选择列表中的标签从第3个开始到最后，

 li:nth-child(n+3){
 background:#fff
 }

4: nth-child(-n+3) 表示选择列表中的标签从0到3，即小于3

li:nth-child(-n+3){
background:#fff
}

5: nth-last-child(3)
表示选择列表中的倒数第3个标签

li:nth-last-child(3){background:#fff}

first-child用法：

1、first-child
first-child表示选择列表中的第一个标签

li:first-child{background:#fff}

last-child用法：

1、last-child
last-child表示选择列表中的最后一个标签，

li:last-child{background:#fff}

P:nth-of-type(1)
//表示选择列表中的第一个p标签

注释 使用p:nth-child(n)得满足两个条件

1. 它的位置必须在它父元素的第n个，从1开始计数
2. 它必须是P元素（相对于p:nth-child(n)来举例）

而使用p:nth-of-type(n)就比较宽松了

• 只要它是第n个P元素就行了