:nth-child()的“序号”指元素在父元素所有子节点中的绝对位置（从1开始），与类型、可见性、类名无关；如<ul>中<li>A</li><p>B</p><li>C</li>，第二个li是第3个子元素，需用li:nth-child(3)。
什么是 :nth-child() 的“序号”？
这个序号不是你肉眼看到的第几个 li 或第几个 div，而是它在**父元素所有子节点中的绝对位置**——从 1 开始数，不管类型、不管是否隐藏、不管有没有类名。
- 如果父元素是
<ul>，里面依次是<li>A</li>、<p>B</p>、<li>C</li>，那么第二个li（即 C）其实是父元素的第 3 个子元素，li:nth-child(3)才能选中它 -
li:nth-child(2)在这个例子里会失效，因为第 2 个子元素是p，不是li - 空格、换行、注释在 HTML 中也会生成文本节点，但现代浏览器通常忽略它们对
:nth-child()计数的影响；不过嵌入了<script>或<style>标签时，它们会被计入子元素总数
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 个子元素，又匹配前面的标签/类名」。二者缺一不可。
- 父元素内子节点顺序是：
<h2>标题</h2>、<div class="item">内容</div>、<span>说明</span>→ 那么div:nth-child(2)✅ 成功匹配 - 如果顺序变成：
<div class="header">…</div>、<div class="item">内容</div>、<span>说明</span>→ 第 2 个子元素确实是div，仍 ✅ 匹配 - 但如果顺序是：
<span>提示</span>、<div class="item">内容</div>→ 第 2 个子元素是div，div:nth-child(2)✅ 仍成立 - 但若写成
.item:nth-child(2)，而第 2 个子元素是<div class="header">，那就 ❌ 不匹配——类名必须同时满足位置和类型约束
什么时候该换用 :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 结构——打开开发者工具，把鼠标悬停在父元素上，看它的子节点列表，数清楚哪个位置是什么元素。这一步省掉，后面全靠猜。
