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 正文”，就该用它。

jm-jsjkxyjs02-zlm-405

使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。

下载

• 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) 这类关键词写法，计数逻辑也完全遵循上述规则。

  <div class="container">
    <h3>标题一</h3>
    <p>第一段正文</p>
    <span>辅助说明</span>
    <p>第二段正文</p>
  </div>
  <p><style>
  /<em> ❌ 不生效：第2个子元素是 <p>，但第2个子元素其实是 <h3> /
  .container p:nth-child(2) { color: red; }</style></p><p>/<em> ✅ 生效：忽略 h3 和 span，只对 p 单独计数，第2个 p 就是“第二段正文” </em>/
  .container p:nth-of-type(2) { color: blue; }
  </p>

  真正关键的不是记规则，而是养成习惯：写 :nth- 之前，先扫一眼父元素的子节点构成。混类型结构太常见，而 :nth-of-type 才是你默认该信任的那个。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！