:nth-child(an+b)按子元素位置匹配，a为周期，n为变量，b为偏移；可选奇偶项、第几个或每几个元素，如2n+1选奇数项，3n+5从第5起每3个选1，-n+4选前4个，4n选4的倍数项；注意索引从1开始且基于所有子元素，非同类标签用:nth-of-type。
使用 CSS 的 :nth-child 伪类可以选择父元素下的特定子元素，按它们在文档流中的位置进行匹配。它非常灵活，可以选中奇数项、偶数项，或者第几个、每几个元素。
基本语法
:nth-child(an + b) 是核心公式，其中：
- a 是循环的周期（步长）
- n 是从 0 开始的变量（代表 0, 1, 2, ...）
- b 是偏移量（起始位置）
比如 2n+1 表示“每两个中的第一个”，即奇数项。
常见用法示例
下面是一些实用的写法和对应效果：
立即学习“前端免费学习笔记（深入）”；
选择奇数位置的子元素常用于表格隔行变色：
tr:nth-child(odd) {
background-color: #f2f2f2;
}
选择偶数位置的子元素
配合上面实现斑马条纹：
tr:nth-child(even) {
background-color: #e6e6e6;
}
选择第 3 个子元素
只选中第三个：
li:nth-child(3) {
color: red;
}
从第 5 个开始，每 3 个选一次（5, 8, 11, ...）
公式是 3n+5：
div:nth-child(3n+5) {
border-top: 1px solid #ccc;
}
选择前 4 个子元素
使用负系数加偏移：
li:nth-child(-n+4) {
font-weight: bold;
}
每 4 个元素选中一个（如 4, 8, 12, ...）
section:nth-child(4n) {
margin-bottom: 20px;
}
注意事项
:nth-child 计算的是父元素下所有子元素的位置，不管类型是否一致。例如：
<ul> <li>第一项</li> <p>段落（不是 li）</p> <li>第二项</li> </ul>
此时第二个 li 实际上是第 3 个子元素，所以要用 li:nth-child(3) 才能选中。
如果只想根据同类标签排序，应使用 :nth-of-type。
小技巧：快速验证公式
把 an + b 中的 n 替换为 0, 1, 2, 3... 看结果：
-
3n+1→ 当 n=0 得 1；n=1 得 4；n=2 得 7 → 选 1, 4, 7, 10... -
2n→ 2, 4, 6, 8... → 偶数 -
2n+1→ 1, 3, 5, 7... → 奇数
基本上就这些，掌握公式后可以精准控制页面中的任意位置元素。关键是理解索引是从 1 开始，且计算基于所有子节点的位置。不复杂但容易忽略细节。
