:nth-child()的“序号”指元素在父元素所有子节点中的绝对位置（从1开始），与类型、可见性、类名无关；如中ABC，第二个li是第3个子元素，需用li:nth-child(3)。
什么是 :nth-child() 的“序号”？
这个序号不是你肉眼看到的第几个 li 或第几个 div，而是它在**父元素所有子节点中的绝对位置**——从 1 开始数，不管类型、不管是否隐藏、不管有没有类名。
- 如果父元素是
- A
B
- C
li（即 C）其实是父元素的第 3 个子元素，li:nth-child(3)才能选中它 -
li:nth-child(2)在这个例子里会失效，因为第 2 个子元素是p，不是li - 空格、换行、注释在 HTML 中也会生成文本节点，但现代浏览器通常忽略它们对
:nth-child()计数的影响；不过嵌入了或标签时，它们会被计入子元素总数
an + b 公式到底怎么算？
别被公式吓住：浏览器会把 n 从 0 开始代入，只要结果 ≥ 1，就对应一个有效位置。关键看 a（步长）和 b（起点）怎么配合。
-
:nth-child(3n)→ n=0→0（跳过），n=1→3，n=2→6，n=3→9…… → 选第 3、6、9… 个子元素 -
:nth-child(3n+1)→ n=0→1，n=1→4，n=2→7…… → 选第 1、4、7… 个子元素 -
:nth-child(-n+3)→ n=0→3，n=1→2，n=2→1，n=3→0（停）→ 实际选第 1、2、3 个子元素（常用于“前 N 个”） -
odd等价于2n+1，even等价于2n，但写关键字更直观、不易出错
为什么明明写了 div:nth-child(2) 却没生效？
这是最常踩的坑：选择器要求「既是第 n 个子元素，又匹配前面的标签/类名」。二者缺一不可。
立即学习“前端免费学习笔记（深入）”；
- 父元素内子节点顺序是：
标题
说明→ 那么div:nth-child(2)✅ 成功匹配 - 如果顺序变成：
说明→ 第 2 个子元素确实是div，仍 ✅ 匹配 - 但如果顺序是：
提示、div，div:nth-child(2)✅ 仍成立 - 但若写成
.item:nth-child(2)，而第 2 个子元素是，那就 ❌ 不匹配——类名必须同时满足位置和类型约束什么时候该换用
:nth-of-type()？当你真正想选的是“同类型中的第 n 个”，而不是“所有子元素中的第 n 个”，就该切换了。
- 场景：父元素混排了
p、div、p、section、p，你想给**第三个p** 加粗 → 用p:nth-of-type(3)，不是p:nth-child(5)（它依赖结构稳定，易断） -
:nth-of-type(n)只统计同标签名的兄弟元素，自动跳过其他类型，语义更贴近直觉 - 注意：
:nth-of-type()不支持类名或属性筛选，只能基于元素类型（div、p等）
真正难的不是记住公式，而是每次写之前先快速扫一眼父容器的 DOM 结构——打开开发者工具，把鼠标悬停在父元素上，看它的子节点列表，数清楚哪个位置是什么元素。这一步省掉，后面全靠猜。
- 场景：父元素混排了
