CSS 伪类选择器中的表达式(an+b)

[maomao1996]

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 不可省略

相关资料

• :nth-child - CSS（层叠样式表）
• :nth-child - CSS-Tricks