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，才命中。
- 如果父元素结构是
<h3>标题</h3><p>正文1</p><h3>标题2</h3><p>正文2</p>，那么p:nth-child(2)会选中“正文1”（它是第 2 个子元素）； -
p:nth-child(4)才会选中“正文2”（它是第 4 个子元素）； - 一旦中间插入
<span>、注释节点或文本节点，序号立刻偏移，样式就“消失”了。
什么时候该用 :nth-of-type(n)？
当你真正想选“第几个同类型标签”时——比如“列表里第 3 个 li”，或“新闻页中第 2 个 p 正文”，就该用它。
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
-
p:nth-of-type(2)会跳过所有非p元素，只在p标签里单独计数； - 上面那个混排结构中，它精准命中“正文2”，不受
h3干扰； - 它对 DOM 动态变化更鲁棒：JS 插入一个
<div>不会影响p的类型序号。
常见误用场景与检查清单
样式没生效？先快速核对这几点：
立即学习“前端免费学习笔记（深入）”；
- 父元素里是否混有其他标签（
span、div、comment节点）？→ 优先换用:nth-of-type； - 你在调试器里看到目标元素“明明是第 2 个
p”，但:nth-child(2)不生效 → 几乎肯定是位置被其他兄弟占了； - 用浏览器开发者工具的“Computed”面板，把鼠标悬停在选择器上，看它实际高亮了哪个元素——这是最快验证方式；
- 别忘了：
:nth-child(odd)和:nth-of-type(even)这类关键词写法，计数逻辑也完全遵循上述规则。
<div class="container">
<h3>标题一</h3>
<p>第一段正文</p>
<span>辅助说明</span>
<p>第二段正文</p>
</div>
<p><style>
/<em> ❌ 不生效：第2个子元素是 <p>，但第2个子元素其实是 <h3> </em>/
.container p:nth-child(2) { color: red; }</p><p>/<em> ✅ 生效：忽略 h3 和 span，只对 p 单独计数，第2个 p 就是“第二段正文” </em>/
.container p:nth-of-type(2) { color: blue; }
</style>真正关键的不是记规则，而是养成习惯：写 :nth- 之前，先扫一眼父元素的子节点构成。混类型结构太常见，而 :nth-of-type 才是你默认该信任的那个。
