: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 的模式，并多做测试验证匹配结果。 
