:nth-child按父元素所有子元素位置计数，nth-of-type仅按同类型标签顺序计数；前者易受注释、空格等干扰导致序号偏移，后者跳过异类元素，专选第N个目标标签。
:nth-child 和 :nth-of-type 看似只差一个词，但选中的元素经常完全不同——根本原因在于它们数的“对象”不一样：一个数位置，一个数同类标签的顺序。
为什么 p:nth-child(2) 没选中第二个 <p>
因为 :nth-child(2) 的意思是：“在父元素所有子节点里，找第 2 个孩子，再看它是不是 <p>”。如果第 2 个子节点是 <div>、注释 <!-- --> 或换行产生的空白文本节点，那整个选择器就失效，哪怕后面真有十个 <p>。
常见触发场景：
- 模板里加了
<!-- header -->注释，导致所有:nth-child(n)序号整体后移 - Prettier 格式化后多出缩进换行，生成不可见的文本节点，被计入计数
- JS 动态插入了一个
<span class="loading">在列表开头，打乱原始位置
什么时候必须用 :nth-of-type
当你真正想表达的是“第 N 个 <p>”“第 3 个 <li>”，而不管中间夹了多少其他标签时，:nth-of-type 是唯一可靠的选择。
立即学习“前端免费学习笔记（深入）”；
它内部执行两步：先过滤出所有同类型标签（比如全部 <p>），再按出现顺序编号。中间的 <h3>、<img>、注释、空格全被跳过。
典型适用场景：
- CMS 输出的富文本段落，混着
<blockquote>、<hr>、<figure> - Markdown 渲染结果，标题与段落交错
- 用户可编辑区域（如
contenteditable），结构不可控
例如：p:nth-of-type(2) 会稳稳命中 DOM 中第二个 <p>，哪怕它实际是父元素的第 12 个子节点。
调试时一眼分清该用哪个
别靠背规则，直接用浏览器 DevTools 验证：
- 右键目标元素 → 「Scroll into view」→ 展开父节点，在「Children」列表里数它的**真实序号（从 1 开始）**
- 再手动数一遍：它前面有多少个同类型兄弟（比如多少个
<p>） - 两个数字一致？那
:nth-child和:nth-of-type效果才相同；不一致？基本该换:nth-of-type - 临时加一条
div:nth-child(3) { outline: 2px solid red; }，看红框套住谁；再换成div:nth-of-type(3)对比差异
最易被忽略的一点：伪类本身不改变 DOM 结构，但一旦父容器里混入非预期节点（哪怕是空格或注释），:nth-child 就会悄无声息地偏移——而这种偏移在线上环境和本地开发之间常常不一致。
