css nth-child 选择器怎么理解_序号选择规则解析

: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，仍 ✅ 匹配
• 但如果顺序是：提示、内容 → 第 2 个子元素是 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 结构——打开开发者工具，把鼠标悬停在父元素上，看它的子节点列表，数清楚哪个位置是什么元素。这一步省掉，后面全靠猜。