> 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)得满足两个条件
- 它的位置必须在它父元素的第n个,从1开始计数
- 它必须是P元素(相对于p:nth-child(n)来举例)
而使用p:nth-of-type(n)就比较宽松了
- 只要它是第n个P元素就行了