css :nth-child() 完全用法指南

:nth-child() 完全用法指南

本文档完整覆盖 CSS 伪类选择器 :nth-child() 的基础用法、高频场景、进阶技巧及关联拓展伪类，结合代码示例和避坑说明，适用于前端开发日常查阅。

一、基础概念与语法

1.1 核心定义

:nth-child(N) 是 CSS 位置伪类选择器，用于根据元素在父元素中的位置顺序匹配直接子元素，支持固定位置、关键词、公式三种匹配方式。

⚠️ 关键特性：计数包含父元素下所有直接子元素（无论标签、类名），按出现顺序从 1 开始计数。

1.2 语法格式

/* 通用语法 */
父选择器 子选择器:nth-child(N) {
  /* 样式规则 */
}

/* 示例：匹配 .parent 下的第 N 个 .item 子元素 */
.parent .item:nth-child(N) {
  background: #f5f5f5;
}

其中 N 可取值：

• 正整数（如 3、5）：匹配固定位置元素

• 关键词（odd/even）：匹配奇偶位置元素

• 公式（如 3n+1、-n+3）：匹配规律位置元素

二、高频核心用法（90% 开发场景覆盖）

2.1 固定位置匹配

直接使用正整数 N，匹配父元素下第 N 个子元素。

/* 匹配第 5 个元素，设置高亮样式 */
.item:nth-child(5) {
  background: #ff4d4f;
  color: #fff;
  font-weight: bold;
}

2.2 奇偶匹配（隔行变色）

适用于表格、列表的隔行差异化样式，提升可读性。

/* 方式 1：关键词写法（语义清晰，推荐） */
.list-item:nth-child(odd) { /* 奇数行：1、3、5... */
  background: #f5f5f5;
}
.list-item:nth-child(even) { /* 偶数行：2、4、6... */
  background: #fff;
}

/* 方式 2：公式等价写法 */
.list-item:nth-child(2n+1) { /* 等价于 odd */
  background: #f5f5f5;
}
.list-item:nth-child(2n) { /* 等价于 even */
  background: #fff;
}

2.3 分组循环匹配

通过公式 an+b 实现「每 a 个为一组」的循环样式，n 从 0 开始递增（0、1、2...）。

2.3.1 3 个一组循环（常用）

/* 第 1、4、7...个（每组第 1 个） */
.card:nth-child(3n+1) {
  background: linear-gradient(180deg, #FFE9E5 0%, #FFFFFF 100%);
}
/* 第 2、5、8...个（每组第 2 个） */
.card:nth-child(3n+2) {
  background: linear-gradient(180deg, #FFE7D2 0%, #FFFFFF 100%);
}
/* 第 3、6、9...个（每组第 3 个） */
.card:nth-child(3n) {
  background: linear-gradient(180deg, #F1FFED 0%, #FFFFFF 100%);
}

2.3.2 4 个一组循环（扩展）

.item:nth-child(4n+1) { color: #ff5a3c; } /* 组内第 1 个 */
.item:nth-child(4n+2) { color: #ff843c; } /* 组内第 2 个 */
.item:nth-child(4n+3) { color: #6eae20; } /* 组内第 3 个 */
.item:nth-child(4n)   { color: #2080ae; } /* 组内第 4 个 */

2.4 范围匹配

通过公式组合，匹配某一区间内的元素。

2.4.1 匹配前 N 个元素

/* 匹配前 3 个元素（公式：-n + 3） */
.item:nth-child(-n + 3) {
  position: relative;
}
/* 给前 3 个元素添加"新品"标签 */
.item:nth-child(-n + 3)::before {
  content: "新品";
  position: absolute;
  top: 0;
  right: 0;
  background: #ff0000;
  color: #fff;
  font-size: 12px;
  padding: 2px 5px;
}

2.4.2 匹配从第 N 个开始的所有元素

/* 从第 4 个开始（公式：n + 4） */
.item:nth-child(n + 4) {
  opacity: 0.8; /* 降低非优先元素透明度 */
  margin-top: 10px;
}

2.4.3 匹配中间区间元素

/* 匹配第 3~6 个元素（闭区间，包含首尾） */
.item:nth-child(n + 3):nth-child(-n + 6) {
  background: #fffacd;
  border: 1px solid #ffd700;
}

三、进阶用法（语法补充）

3.1 负数 b 的公式（了解即可）

公式 an + b 中 b 可为负数，最终结果需为正整数才生效，等价于正数公式，语义较差，不推荐优先使用。

/* 公式 3n - 2 等价于 3n + 1（匹配 1、4、7...） */
.item:nth-child(3n - 2) {
  color: #ff5a3c;
}

3.2 无效写法避坑

• :nth-child(0)：计数从 1 开始，第 0 个元素不存在，永远无匹配结果。

• 非整数 N：如 :nth-child(2.5)，语法不合法，无匹配效果。

四、关联拓展伪类（功能互补）

与 :nth-child() 同属「位置伪类」，解决复杂场景下的位置匹配需求。

4.1 :nth-last-child(N)：从后往前计数

逻辑与 :nth-child() 一致，区别是从父元素最后一个子元素开始计数。

/* 1. 匹配最后 1 个元素 */
.item:nth-last-child(1) {
  border-bottom: 2px solid #ff5a3c;
}
/* 2. 匹配倒数前 3 个元素 */
.item:nth-last-child(-n + 3) {
  background: #f8f8f8;
}

4.2 :nth-of-type(N)：按标签类型计数

仅对同标签类型的子元素计数，无视其他标签，解决父元素多标签混合的计数混乱问题（避坑核心）。

<!-- 示例 HTML 结构 --&gt;
&lt;div class="parent"&gt;
  &lt;h2&gt;标题&lt;/h2&gt; <!-- 第 1 个子元素（h2 标签） -->
  <div class="item">项目1&lt;/div&gt; <!-- 第 2 个子元素（div 标签） -->
  <div class="item"&gt;项目2&lt;/div&gt; <!-- 第 3 个子元素（div 标签） -->
</div>

/* 正确：匹配 .item 类对应的 div 标签第 1 个元素（项目1） */
.item:nth-of-type(1) {
  color: #6eae20;
}
/* 错误：.item:nth-child(1) 会匹配 h2 标签，逻辑混乱 */

4.3 :nth-last-of-type(N)：按标签类型从后计数

结合 :nth-of-type() 与 :nth-last-child() 功能，按标签类型从后往前计数。

/* 匹配 .content 类对应的 p 标签倒数第 2 个元素 */
.content:nth-last-of-type(2) {
  background: #f1ffed;
}

4.4 其他辅助位置伪类

伪类	功能描述	示例代码
:first-child	匹配第 1 个子元素（等价于 :nth-child(1)）	.item:first-child { margin-top: 0; }
:last-child	匹配最后 1 个子元素（等价于 :nth-last-child(1)）	.item:last-child { margin-bottom: 0; }
:first-of-type	匹配某标签类型第 1 个元素（等价于 :nth-of-type(1)）	.content:first-of-type { font-weight: bold; }
:last-of-type	匹配某标签类型最后 1 个元素（等价于 :nth-last-of-type(1)）	.content:last-of-type { border: none; }
:only-child	匹配父元素下唯一的子元素	.box:only-child { width: 100%; }
:only-of-type	匹配父元素下某标签类型的唯一元素	.content:only-of-type { color: red; }

五、用法边界与避坑总结

5.1 无法实现的需求

• 根据元素内容匹配（需 JS 实现，如匹配包含特定关键词的元素）。

• 根据动态类名匹配（如匹配第 2 个拥有 active 类的元素，需 JS 辅助）。

• 跨父元素匹配（每个父元素子元素计数独立，无法跨层级统一计数）。

5.2 核心避坑点

1. 父元素多标签混合时，优先用 :nth-of-type() 替代 :nth-child()，避免计数混乱。

2. 公式匹配时，明确 n 从 0 开始递增，确保结果为正整数（负数结果无匹配）。

3. 避免使用无效写法（如 :nth-child(0)、非整数 N），减少语法冗余。

六、速查对照表

需求场景	选择器写法	说明
匹配第 5 个元素	:nth-child(5)	固定位置匹配
奇数行隔行变色	:nth-child(odd) / :nth-child(2n+1)	表格/列表常用
偶数行隔行变色	:nth-child(even) / :nth-child(2n)	表格/列表常用
3 个一组第 1 个	:nth-child(3n+1)	循环样式常用
前 3 个元素	:nth-child(-n + 3)	范围匹配
从第 4 个开始	:nth-child(n + 4)	范围匹配
第 3~6 个元素	:nth-child(n+3):nth-child(-n+6)	区间匹配
最后 2 个元素	:nth-last-child(-n + 2)	从后往前计数
同标签第 2 个元素	:nth-of-type(2)	多标签混合场景