:nth-child() 高级用法

掌握 An+B 语法，实现复杂的元素选择模式

什么是 :nth-child()？

:nth-child() 是一个强大的结构伪类选择器，允许你根据元素在父元素中的位置来选择元素。 它使用 An+B 数学公式来表达复杂的选择模式，可以实现各种灵活的布局和样式需求。

与简单的 :first-child 或 :last-child 不同，:nth-child() 可以选择任意位置、间隔、范围的元素，是实现斑马条纹、网格布局、响应式设计的关键工具。

  • 灵活选择 - 使用数学公式选择任意位置的元素
  • 模式匹配 - 轻松实现奇数、偶数、每 N 个等模式
  • 范围选择 - 选择前 N 个、后 N 个或中间范围的元素
  • 现代语法 - 支持 of selector 语法进行条件过滤

An+B 语法详解

An+B 是一个数学表达式，其中 A 和 B 是整数，n 是从 0 开始递增的计数器。 公式会计算出一系列匹配的元素位置。

💡 An+B 公式解析

公式结构： An + B

  • A - 循环间隔（步长），决定每隔多少个元素选择一次
  • n - 计数器，从 0 开始：0, 1, 2, 3, 4...
  • B - 偏移量，决定从第几个元素开始

计算过程：

  • 当 n=0 时：A×0 + B = B（第 B 个元素）
  • 当 n=1 时：A×1 + B = A+B（第 A+B 个元素）
  • 当 n=2 时：A×2 + B = 2A+B（第 2A+B 个元素）
  • 以此类推...
/* 基础语法 */
:nth-child(An+B) {
  /* 样式规则 */
}

/* 常用关键字 */
:nth-child(odd)   /* 等价于 2n+1，选择奇数位 */
:nth-child(even)  /* 等价于 2n，选择偶数位 */

/* 单个数字 - 选择第 N 个元素 */
:nth-child(3)     /* 选择第 3 个元素 */

/* An 形式 - 每隔 A 个选择一次 */
:nth-child(3n)    /* 选择第 3, 6, 9, 12... 个元素 */

/* An+B 形式 - 从第 B 个开始，每隔 A 个选择一次 */
:nth-child(3n+1)  /* 选择第 1, 4, 7, 10... 个元素 */
:nth-child(3n+2)  /* 选择第 2, 5, 8, 11... 个元素 */

/* 负数 A - 选择前 N 个元素 */
:nth-child(-n+3)  /* 选择前 3 个元素（1, 2, 3） */

/* 正数 n+B - 选择第 B 个之后的所有元素 */
:nth-child(n+4)   /* 选择第 4 个及之后的所有元素 */

/* 组合使用 - 选择范围 */
:nth-child(n+3):nth-child(-n+7)  /* 选择第 3-7 个元素 */

常用模式速查表

2n 或 even
选择所有偶数位元素
匹配：2, 4, 6, 8...
2n+1 或 odd
选择所有奇数位元素
匹配：1, 3, 5, 7...
3n
选择每 3 个元素
匹配：3, 6, 9, 12...
-n+3
选择前 3 个元素
匹配：1, 2, 3
n+4
选择第 4 个及之后
匹配：4, 5, 6, 7...
4n+1
每 4 个选 1 个，从第 1 个开始
匹配：1, 5, 9, 13...

of 选择器语法（现代特性）

:nth-child(An+B of selector) 允许你在特定类型的元素中应用 An+B 模式，而不是所有子元素。 

/* 传统方式 - 计数所有子元素 */
li:nth-child(2n) {
  /* 选择所有偶数位的 li，但如果有其他元素会影响计数 */
}

/* 现代方式 - 只计数匹配的元素 */
:nth-child(2n of li) {
  /* 只在 li 元素中计数，选择偶数位的 li */
}

:nth-child(3n of .item) {
  /* 只在 .item 元素中计数，选择每 3 个 .item */
}

:nth-child(odd of [data-active]) {
  /* 只在有 data-active 属性的元素中计数奇数位 */
}
⚠️ 浏览器支持

of selector 语法是较新的特性，在 Safari 9+ 和 Chrome 111+ 中支持。 对于旧版浏览器，需要使用传统的 :nth-of-type() 或组合选择器。

交互式 An+B 计算器

输入 A 和 B 的值，实时查看哪些元素会被选中。通过可视化帮助你理解 An+B 公式的工作原理。

循环间隔（-10 到 10）
起始偏移（-10 到 20）
显示 5-20 个元素
当前选择器： :nth-child(2n+1)
6 个元素匹配
💡 计算说明
快捷模式：

常用模式示例

以下是 :nth-child() 最常用的选择模式，涵盖了大多数实际应用场景。

模式 1: 选择前 N 个元素

效果预览 - 前 5 个元素
1
2
3
4
5
6
7
8
9
10
11
12

💡 前 5 个元素被高亮显示

/* 选择前 5 个元素 */
.item:nth-child(-n+5) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

/* 公式解析：-n+5
   n=0: -0+5 = 5 ✓
   n=1: -1+5 = 4 ✓
   n=2: -2+5 = 3 ✓
   n=3: -3+5 = 2 ✓
   n=4: -4+5 = 1 ✓
   n=5: -5+5 = 0 ✗ (无效)
   
   结果：选择第 1, 2, 3, 4, 5 个元素 */

/* 应用场景：
   - 限制显示的项目数量
   - 突出显示最新的几条记录
   - 创建"查看更多"功能 */

模式 2: 选择第 N 个之后的所有元素

效果预览 - 第 4 个之后
1
2
3
4
5
6
7
8
9
10
11
12

💡 第 4 个及之后的元素被高亮 

/* 选择第 4 个及之后的所有元素 */
.item:nth-child(n+4) {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
}

/* 公式解析：n+4
   n=0: 0+4 = 4 ✓
   n=1: 1+4 = 5 ✓
   n=2: 2+4 = 6 ✓
   n=3: 3+4 = 7 ✓
   ...持续到最后
   
   结果：选择第 4, 5, 6, 7... 个元素 */

/* 应用场景：
   - 跳过前几个元素
   - 实现"加载更多"后的新内容样式
   - 分页显示 */

模式 3: 选择范围内的元素（第 3-7 个）

效果预览 - 第 3 到 7 个
1
2
3
4
5
6
7
8
9
10
11
12

💡 第 3-7 个元素被高亮（组合选择器） 

/* 选择第 3 到第 7 个元素 */
.item:nth-child(n+3):nth-child(-n+7) {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
}

/* 组合两个选择器：
   :nth-child(n+3)  → 第 3 个及之后
   :nth-child(-n+7) → 前 7 个
   
   交集：第 3, 4, 5, 6, 7 个元素 */

/* 应用场景：
   - 选择特定范围的元素
   - 实现分页高亮
   - 创建视觉分组 */

模式 4: 选择每 3 个元素

效果预览 - 每 3 个
1
2
3
4
5
6
7
8
9
10
11
12

💡 每 3 个元素（3, 6, 9, 12）被高亮 

/* 选择每 3 个元素 */
.item:nth-child(3n) {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  color: white;
}

/* 公式解析：3n
   n=0: 3×0 = 0 ✗ (无效)
   n=1: 3×1 = 3 ✓
   n=2: 3×2 = 6 ✓
   n=3: 3×3 = 9 ✓
   n=4: 3×4 = 12 ✓
   
   结果：选择第 3, 6, 9, 12... 个元素 */

/* 应用场景：
   - 网格布局中每行的最后一个元素
   - 创建视觉节奏
   - 分组显示 */

模式 5: 选择偶数位的特定类元素（使用 of 语法）

效果预览 - 偶数位的 .highlight
1
H1
3
H2
5
H3
7
H4
9
H5
11
H6

💡 只在 .highlight 元素中计数，选择偶数位（H2, H4, H6） 

/* 只在 .highlight 元素中选择偶数位 */
.item:nth-child(even of .highlight) {
  background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
  color: white;
}

/* of 语法说明：
   - 传统 :nth-child(even) 会计数所有子元素
   - :nth-child(even of .highlight) 只计数 .highlight 元素
   - 更精确的选择控制 */

/* 浏览器支持：
   Chrome 111+, Firefox 113+, Safari 9+ */

/* 应用场景：
   - 混合元素列表中的斑马条纹
   - 只对特定类型元素应用样式
   - 动态内容的精确控制 */

模式 6: 选择每 4 个中的第 1 个（4n+1）

效果预览 - 4n+1 模式
1
2
3
4
5
6
7
8
9
10
11
12

💡 每行的第一个元素（1, 5, 9）被高亮 

/* 选择每 4 个中的第 1 个 */
.item:nth-child(4n+1) {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  font-weight: 900;
}

/* 公式解析：4n+1
   n=0: 4×0+1 = 1 ✓
   n=1: 4×1+1 = 5 ✓
   n=2: 4×2+1 = 9 ✓
   n=3: 4×3+1 = 13 ✓
   
   结果：选择第 1, 5, 9, 13... 个元素 */

/* 应用场景：
   - 4 列网格布局中每行的第一个元素
   - 创建视觉起点标记
   - 响应式网格的列控制 */

/* 类似模式：
   4n+2 → 每行第 2 个 (2, 6, 10...)
   4n+3 → 每行第 3 个 (3, 7, 11...)
   4n   → 每行最后一个 (4, 8, 12...) */

模式 7: 奇偶交替（斑马条纹）

效果预览 - 表格斑马条纹
姓名 职位 部门
张三 工程师 技术部
李四 设计师 设计部
王五 产品经理 产品部
赵六 运营 运营部
孙七 测试 质量部

💡 奇偶行交替背景色，提高可读性 

/* 经典的表格斑马条纹 */
tbody tr:nth-child(odd) {
  background: var(--bg-primary);
}

tbody tr:nth-child(even) {
  background: var(--bg-secondary);
}

/* 也可以使用关键字 */
tbody tr:nth-child(odd) {
  background: #ffffff;
}

tbody tr:nth-child(even) {
  background: #f9fafb;
}

/* 添加悬停效果 */
tbody tr:hover {
  background: var(--primary-light);
  cursor: pointer;
}

/* 应用场景：
   - 表格行交替背景
   - 列表项视觉分隔
   - 提高大量数据的可读性
   - 最常用的 :nth-child() 模式之一 */

浏览器兼容性

:nth-child() 基础语法在所有现代浏览器中都得到了完全支持。

特性 Chrome Firefox Safari Edge
:nth-child(An+B) 1+ 3.5+ 3.1+ 12+
:nth-child(of selector) 111+ 113+ 9+ 111+

查看详细兼容性数据 →