p:nth-child(2)不生效是因为它按父元素所有子元素位置计数，而p:nth-of-type(2)按p标签单独计数，后者更稳定可靠。
选错伪类是样式不生效最常见原因——p:nth-child(2) 和 p:nth-of-type(2) 看似一样，实际匹配逻辑完全不同。
为什么 p:nth-child(2) 没选中你想要的第二个 p？
因为 :nth-child(n) 只看“整体座位号”：它从父元素第一个子元素开始数，不管类型，只要第 n 个位置上的元素恰好是 p，才命中。
- 如果父元素结构是
标题
正文1
标题2
正文2
立即学习“前端免费学习笔记（深入）”；
p:nth-child(2)会选中“正文1”（它是第 2 个子元素）； -
p:nth-child(4)才会选中“正文2”（它是第 4 个子元素）； - 一旦中间插入
、注释节点或文本节点，序号立刻偏移，样式就“消失”了。
什么时候该用 :nth-of-type(n)？
当你真正想选“第几个同类型标签”时——比如“列表里第 3 个 li”，或“新闻页中第 2 个 p 正文”，就该用它。
-
p:nth-of-type(2)会跳过所有非p元素，只在p标签里单独计数； - 上面那个混排结构中，它精准命中“正文2”，不受
h3干扰； - 它对 DOM 动态变化更鲁棒：JS 插入一个 不会影响
p的类型序号。常见误用场景与检查清单
样式没生效？先快速核对这几点：
- 父元素里是否混有其他标签（
span、div、comment节点）？→ 优先换用:nth-of-type； - 你在调试器里看到目标元素“明明是第 2 个
p”，但:nth-child(2)不生效 → 几乎肯定是位置被其他兄弟占了； - 用浏览器开发者工具的“Computed”面板，把鼠标悬停在选择器上，看它实际高亮了哪个元素——这是最快验证方式；
- 别忘了：
:nth-child(odd)和:nth-of-type(even)这类关键词写法，计数逻辑也完全遵循上述规则。
标题一
第一段正文
辅助说明第二段正文
真正关键的不是记规则，而是养成习惯：写
:nth-之前，先扫一眼父元素的子节点构成。混类型结构太常见，而:nth-of-type才是你默认该信任的那个。 - 父元素里是否混有其他标签（
