CSS nth-child 怎么用？选择器完全指南与实例

为什么要掌握 nth-child 选择器？

想像一下，你需要对一个列表中的特定项目套用不同样式：每三个元素变色、奇数行加背景、前五个元素特殊处理… 如果用传统方法，你需要给每个元素加上不同的 class，既麻烦又不优雅。

CSS nth-child 选择器让你可以：

• 精准选择任何位置的元素，无需额外 class
• 动态响应内容变化，自动适用样式规则
• 减少 HTML 标记，让代码更干净
• 实现复杂模式，如表格斑马纹、网格布局等

本文将透过大量互动范例，让你完全掌握这个强大的 CSS 选择器！

基础 nth-child 选择器

让我们从最基本的用法开始，透过视觉化的方式理解每种选择器的运作原理。

基础选择器程式码解析

上面的范例展示了最常用的 nth-child 选择器。让我们详细了解每种语法：

数字选择

/* 选择第 2 个元素 */
.item:nth-child(2) {
  background: blue;
}

/* 选择第 1 个元素的简写 */
.item:first-child {
  background: green;
}

/* 选择最后一个元素的简写 */
.item:last-child {
  background: orange;
}

奇偶数选择

/* 选择奇数位置 (1, 3, 5, 7...) */
.item:nth-child(odd) {
  background: purple;
}

/* 选择偶数位置 (2, 4, 6, 8...) */
.item:nth-child(even) {
  background: pink;
}

倍数选择

/* 选择 3 的倍数位置 (3, 6, 9, 12...) */
.item:nth-child(3n) {
  background: cyan;
}

重要概念：

• nth-child 从 1 开始计数，不是从 0
• 选择器会选中所有符合条件的子元素
• odd 等同于 2n+1，even 等同于 2n

进阶数学公式选择器

nth-child 的真正威力在于它的数学公式功能。透过 an+b 的格式，你可以实现复杂的选择模式。

数学公式深度解析

nth-child 的数学公式 an+b 是理解进阶选择器的关键。让我们深入了解：

公式结构

:nth-child(an+b)

• a: 系数，决定间隔模式
• n: 变数，从 0 开始无限递增 (0, 1, 2, 3…)
• b: 偏移量，调整起始位置

常用公式范例

/* 奇数元素 = 2n+1 */
:nth-child(2n+1)  /* n=0: 1, n=1: 3, n=2: 5... */

/* 偶数元素 = 2n */
:nth-child(2n)    /* n=1: 2, n=2: 4, n=3: 6... */

/* 每三个 = 3n */
:nth-child(3n)    /* n=1: 3, n=2: 6, n=3: 9... */

/* 前五个 = -n+5 */
:nth-child(-n+5)  /* n=0: 5, n=1: 4, n=2: 3, n=3: 2, n=4: 1 */

/* 从第3个开始的每2个 = 2n+3 */
:nth-child(2n+3)  /* n=0: 3, n=1: 5, n=2: 7... */

负数系数的妙用

/* 选择前 N 个元素 */
:nth-child(-n+3) { /* 选择前3个 */ }
:nth-child(-n+5) { /* 选择前5个 */ }

/* 选择中间范围 */
:nth-child(n+3):nth-child(-n+7) { /* 选择第3到7个 */ }

实际应用情境

/* 表格斑马纹 */
tr:nth-child(even) { background: #f5f5f5; }

/* 网格布局每行最后一个 */
.grid-item:nth-child(4n) { margin-right: 0; }

/* 文章列表突出显示每5篇 */
.article:nth-child(5n) { border-left: 4px solid blue; }

实战应用场景

掌握了基础语法后，让我们看看 nth-child 在真实专案中的强大应用。

实战应用程式码详解

上面的范例展示了 nth-child 在真实专案中的具体应用。让我们分析每个场景的实现：

表格斑马纹效果

/* 偶数行背景色 */
.table tr:nth-child(even) {
  background-color: #f5f5f5;
}

/* 也可以用奇数行 */
.table tr:nth-child(odd) {
  background-color: #ffffff;
}

网格布局特殊处理

/* 每行最后一个元素去除右边距 */
.grid-item:nth-child(3n) {
  margin-right: 0;
}

/* 第一行元素加上边框 */
.grid-item:nth-child(-n+3) {
  border-top: 3px solid blue;
}

导航菜单样式

/* 第一个菜单项特殊样式 */
.nav-item:first-child {
  background: #primary-color;
  color: white;
}

/* 偶数菜单项背景 */
.nav-item:nth-child(even) {
  background: #light-gray;
}

内容列表突出显示

/* 每5个项目突出显示 */
.article:nth-child(5n) {
  background: #highlight-color;
  border-left: 4px solid #accent-color;
}

/* 第一个项目特别处理 */
.article:first-child {
  font-weight: bold;
  background: #featured-color;
}

进度指示器

/* 已完成的步骤 (前N个) */
.step:nth-child(-n+3) {
  background: #success-color;
  color: white;
}

/* 当前步骤 */
.step:nth-child(4) {
  background: #current-color;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

实用技巧总结：

1. 表格：用 even/odd 提升可读性
2. 网格：用 3n, 4n 等处理每行最后元素
3. 列表：用 5n, 10n 突出重要内容
4. 步骤：用 -n+N 显示完成状态
5. 导航：用 :first-child, :last-child 处理边界

进阶技巧与最佳实践

掌握基础后，让我们探索一些 nth-child 的进阶用法和实际开发中的最佳实践。

复合选择器运用

范围选择

/* 选择第2到第5个元素 */
.item:nth-child(n+2):nth-child(-n+5) {
  background: yellow;
}

/* 排除某些元素后再选择 */
.item:not(:nth-child(3)):nth-child(odd) {
  color: blue;
}

结合类型选择器

/* 只选择奇数位置的 <p> 元素 */
p:nth-child(odd) {
  margin-left: 20px;
}

/* 每3个 <img> 元素 */
img:nth-child(3n) {
  border-radius: 50%;
}

效能最佳化建议

避免过度使用

/* ❌ 效能较差 */
.item:nth-child(2n+1):nth-child(-n+10):not(.special) {
  /* 复杂的复合选择器 */
}

/* ✅ 效能较好 */
.item:nth-child(odd) {
  /* 简洁的选择器 */
}

.item.first-ten:nth-child(odd) {
  /* 结合 class 降低复杂度 */
}

响应式设计中的应用

/* 桌面版：4列布局 */
@media (min-width: 768px) {
  .card:nth-child(4n) {
    margin-right: 0;
  }
}

/* 平板：3列布局 */
@media (max-width: 767px) {
  .card:nth-child(4n) {
    margin-right: initial; /* 重置桌面样式 */
  }

  .card:nth-child(3n) {
    margin-right: 0;
  }
}

浏览器兼容性

nth-child 在现代浏览器中支援良好：

• 支援：Chrome, Firefox, Safari, Edge (所有现代版本)
• 不支援：IE8 及以下版本

兼容性处理

/* 渐进增强方式 */
.item {
  background: #default; /* 默认样式 */
}

.item:nth-child(even) {
  background: #enhanced; /* 支援浏览器的增强样式 */
}

实用选择器公式收藏

/* 常用模式速查 */
:nth-child(odd)        /* 奇数: 1,3,5,7... */
:nth-child(even)       /* 偶数: 2,4,6,8... */
:nth-child(3n)         /* 每3个: 3,6,9,12... */
:nth-child(3n+1)       /* 每3个+1: 1,4,7,10... */
:nth-child(-n+5)       /* 前5个: 1,2,3,4,5 */
:nth-child(n+3)        /* 从第3个开始: 3,4,5,6... */
:nth-child(2n+3)       /* 从3开始每2个: 3,5,7,9... */
:nth-child(4n-1)       /* 每4个的前一个: 3,7,11,15... */

掌握这些技巧后，nth-child 将成为你 CSS 工具箱中最强大的选择器之一！

总结

CSS nth-child 选择器是现代网页设计中不可或缺的工具。透过本文的完整介绍，你已经掌握了：

• 基础语法：数字、odd/even、first/last-child 等基本用法
• 数学公式：an+b 公式的深度理解和灵活运用
• 实战应用：表格、网格、导航、列表等真实场景
• 进阶技巧：复合选择器、效能优化、响应式应用

开始实践的建议：

1. 从简单开始：先熟练掌握 odd/even 和基本数字选择
2. 理解公式：花时间理解 an+b 的计算原理
3. 实际应用：在自己的专案中尝试不同的选择模式
4. 测试验证：使用开发者工具验证选择器效果

记住关键原则：

• nth-child 从 1 开始计数，不是从 0
• 公式中的 n 从 0 开始递增
• 负数系数可以实现「前N个」的选择
• 合理使用可以大幅减少 HTML 标记

CSS nth-child 选择器的强大之处在于它的逻辑性和可预测性。一旦掌握了计算规则，你就能精确选中任何想要的元素，让样式设计更加灵活高效。

现在就开始在你的专案中运用这些技巧，创造出更优雅、更高效的 CSS 代码！