对于:nth-child()
伪类,我们可以用其中一个参数an+b
来指定选中的子元素的位置,其中n
是一个以0
开始的序号;a
和b
是任意整数,可以省略,也可以为负数。它的用法和示例如下:
一、算式
1.当只使用an
时,表示选中每个位置上满足公式条件的元素。
li:nth-child(2n) {
color: blue;
}
上例中选中每一个偶数位置的li
元素,即第2、4、6、8...个li
元素。
2.当只使用an+b
时,表示选中从第b
个开始,每隔a
个元素满足公式条件的元素。
li:nth-child(3n+1) {
color: red;
}
上例中选中每个位置为3n+1
的li
元素,即第1、4、7、10...个li
元素。
3.如果省略了a
或b
,则默认为1
,即每隔一个元素选中一个。
li:nth-child(5) {
background-color: yellow;
}
上例中选中第5个li
元素。
二、数字奇偶
:nth-child(odd)
选中的是位置为奇数的元素,:nth-child(even)
选中的则是位置为偶数的元素。你可以结合上文中第1点所述的 an
的含义来理解:2n
可以选中偶数位置的元素,2n+1
则可以选中奇数位置的元素。而由于 odd
和 even
是比较常用的情况,因此这两个值被单独拿出来作为了快捷方式。
所以,ul li:nth-child(odd)
表示选中每个位置为奇数的 li
元素。也就是说,它会选中 li
元素列表中从第一个开始,每隔一个元素,选中一个元素,因此实际选中的位置是 1、3、5、7、9... 以此类推。