
CSS 伪类选择器中的表达式(an+b)
CSS 伪类选择器中的表达式有如下写法
- 数字:直接匹配具体位置的元素
- 关键字:even 和 odd,根据奇偶去匹配
- 表达式:根据 an + b 的结果去匹配
语法
只针对表达式场景的语法
以 :nth-child(an+b) 为例:该伪类选择器会先找到所有当前元素的兄弟元素,然后按照位置的先后顺序从 1 开始进行排序,再根据伪类选择器括号中的表达式 an+b 所计算出的值对元素进行匹配
an中的a是一个整数,表示倍数an中的n是一个从0开始增长的自然数(即 n=0,1,2,3...)b是一个整数,表示偏移值(即初始位置)
示例:
0n+3:等同于3,会匹配第三个元素1n+0:等同于1n,会匹配所有元素2n+0:等同于2n和关键字(even),会匹配位置为 2、4、6、8...的元素,即偶数位元素2n+1:等同于关键字(odd),会匹配位置为 1、3、5、7... 的元素,即奇数位元素3n+4:会匹配位置为 4、7、10、13... 的元素4n-1:会匹配位置为 4-1、8-1、12-1... 的元素
反向匹配
当 an 的值为负数时为反向匹配,会匹配偏移值 b 之前的元素,并且 b 不能省略(此时最多匹配 b 个元素)
示例:
-n+5:会匹配前五个元素-2n+5:会匹配位置为 5-2*0、5-2*1、5-2*2(即位置为 5 3 1)的元素-4n+10:会匹配位置为 10-4*0、10-4*1、10-4*2(即位置为 10 6 2)的元素
注意点
a和b都必须为整数an必须写在b的前面,不能写成b+an- 元素位置从
1开始,n是从0开始增长的一个自然数 - 当
a为负数时,b不可省略

