CSS:nth-child选择器如何使用_规律性子元素样式应用

:nth-child 选择器通过公式 an+b 精准定位子元素，如 even/odd 实现隔行变色，tr:nth-child(even) 设偶数行背景，.grid-item:nth-child(3n+1) 控制网格首列边距，结合 :not() 排除特定元素，提升样式规律性与维护性。

:nth-child 是 CSS 中一个非常实用的选择器，用于选中父元素下的第 n 个子元素。它特别适合为具有规律性排列的子元素设置样式，比如隔行变色、每三列一组布局等。下面详细介绍其用法和常见应用场景。

基本语法与公式

选择器格式为 :nth-child(an + b)，其中 a 是循环周期，b 是偏移量。n 从 0 开始递增。

• even / odd：可直接使用关键字，如 :nth-child(even) 选中偶数项，:nth-child(odd) 选中奇数项。
• 数字：如 :nth-child(3) 只选第 3 个子元素。
• 公式示例：
  • :nth-child(2n + 1) 表示奇数项（1, 3, 5...）
  • :nth-child(3n) 每第 3 个元素（3, 6, 9...）
  • :nth-child(4n + 1) 从第 1 个开始，每隔 4 个选一次（1, 5, 9...）

实现隔行变色

表格或列表中常用此技巧提升可读性。

tr:nth-child(even) {
  background-color: #f2f2f2;
}

这样所有偶数行背景变为浅灰色，视觉上更清晰。

网格布局中的列样式控制

在多列布局中，可通过 :nth-child 控制特定列的样式。

• 例如每 3 列一组，想让第一列左边距为 0：

.grid-item:nth-child(3n + 1) {
  margin-left: 0;
}

• 或者为每组最后一列设置右边距清零：

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

排除特定元素或重置样式

结合 :not() 可灵活跳过某些元素。

• 比如给所有 div 子元素加边框，但跳过第一个：

div:nth-child(n+2) {
  border-top: 1px solid #ccc;
}

• 或配合类名排除：

.item:not(.special):nth-child(odd) {
  background: yellow;
}

基本上就这些。掌握 :nth-child 的数学逻辑后，可以轻松实现各种规律性样式控制，无需额外类名，结构与样式分离更彻底。关键是理解 an + b 的模式，并多做测试验证匹配结果。