css伪类:nth-child公式选择方法

:nth-child 伪类通过 an+b 公式按位置选中子元素，n≥0 且从1开始计数，支持 odd、even 关键词与数学表达式，常用于隔行变色或规律布局，如 2n 选偶数项、3n+1 每三项首项，需注意不区分元素类型且负值无效。

在CSS中，:nth-child 是一个非常实用的伪类选择器，可以让你根据元素在父容器中的位置来选中特定子元素。它支持关键词（如 odd、even）和公式 an + b 的形式进行灵活选择。

基本语法

:nth-child(an + b) 中：

• a 是循环的步长（系数）
• n 是从0开始的计数变量（不能为负数）
• b 是偏移量（起始位置）

这个公式会匹配满足位置序号等于 an + b 的元素（序号从1开始）。

常见用法示例

以下是一些常用写法及其含义：

立即学习“前端免费学习笔记（深入）”；

• :nth-child(2n) → 选择第2、4、6、8…个元素（偶数项）
• :nth-child(2n+1) → 选择第1、3、5、7…个元素（奇数项）
• :nth-child(n+4) → 从第4个开始，之后所有元素
• :nth-child(3n+1) → 选择第1、4、7、10…个元素（每3个中的第一个）
• :nth-child(1) → 只选第一个子元素（等同于 :first-child）
• :nth-child(even) → 偶数位置元素
• :nth-child(odd) → 奇数位置元素

注意事项

使用时要注意几点：

• 索引是从 1 开始 的，不是从0
• 只看兄弟元素的顺序，不区分类型（除非用 :nth-of-type）
• 如果公式结果小于1，则不会匹配任何元素（如 -n+0）
• n 是整数且 ≥ 0，例如当 a=3, b=1 时：
  • n=0 → 3×0+1 = 1 → 第1个
  • n=1 → 3×1+1 = 4 → 第4个
  • n=2 → 3×2+1 = 7 → 第7个

实际应用场景

常用于表格隔行变色或网格布局中：

tr:nth-child(even) {
background-color: #f2f2f2;
}
li:nth-child(3n+1) {
color: red;
}

这样可以让视觉呈现更有规律。

基本上就这些，掌握 an + b 的计算逻辑后，就能精准控制要选中的子元素位置了。不复杂但容易忽略细节。