使用 :nth-child() 选择器匹配属于其父元素的某个、间隔、某段子元素
选取某个子元素
在括号填入第几个子元素，就选取第几个子元素
css
.foo:nth-child(2) {
color: #f33;
}效果
- 1
- 2
- 3
- 4
- 5
选取间隔子元素
通过 2n + 1 选取奇数位的子元素，修改数字改变间隔
css
.foo:nth-child(2n + 1) {
color: #f33;
}效果
- 1
- 2
- 3
- 4
- 5
选取某段子元素
选取从第3个开始到最后这段子元素
css
.foo:nth-child(n + 3) {
color: #f33;
}效果
- 1
- 2
- 3
- 4
- 5
// 或者
选取从开始到第3个这段子元素
注意：-n 不能够分开
css
.foo:nth-child(-n + 3) {
color: #f33;
}效果
- 1
- 2
- 3
- 4
- 5
选取中间某段子元素
利用上面的方法选取公共部分
注意：-n 不能够分开
css
.foo:nth-child(-n + 4):nth-child(n + 2) {
color: #f33;
}效果
- 1
- 2
- 3
- 4
- 5