p:nth-child(2)常不生效是因为它要求父元素第2个子节点必须是p，而注释、换行等#text节点会占据位置导致失败；p:nth-of-type(2)则只统计p标签序号，跳过其他节点，更可靠。
为什么 p:nth-child(2) 经常不生效
因为 p:nth-child(2) 的逻辑是：先找父元素的第 2 个子节点，再判断它是不是 p。只要第 2 个位置被 <div>、注释 <code><!-- -->、换行产生的空白文本节点（#text）占掉，整个选择器就静默失败——哪怕 DOM 里真有十个 p，也一个都选不到。
常见触发点：
- 模板里加了
<!-- header -->注释，所有:nth-child(n)序号整体后移 - Prettier 格式化后多出缩进换行，生成不可见的
#text节点 - 服务端渲染时动态插入了一个
<section></section>在列表开头
为什么 p:nth-of-type(2) 能稳稳命中第二个 p
p:nth-of-type(2) 的执行路径只有一条：在父元素所有子节点中，过滤出全部 p 标签，然后按它们出现的自然顺序编号（1、2、3…）。中间夹着的 <h3></h3>、<img>、注释、空格，全被跳过，不参与计数。
这意味着：
- 你写的
p:nth-of-type(2)，永远对应 DOM 中“第二个p元素”，和它实际是父元素第几个子节点完全无关 - CMS 输出的富文本、Markdown 渲染结果、用户可编辑区域（
contenteditable）等结构不可控场景下，它是唯一可靠的选择 - 即使你在第一个
p前面插入一个<div class="ad-banner">，<code>p:nth-of-type(2)依然指向原来的第二个p怎么快速验证该用哪个
别靠猜，用浏览器 DevTools 实时看：
- 右键目标
p→ 「Scroll into view」→ 展开父节点，在「Children」列表里数它的**真实位置序号**（从 1 开始） - 再手动数一遍：它前面有多少个同为
p的兄弟（忽略h2、div、灰色的#text和#comment） - 两个数字一致？那
:nth-child和:nth-of-type效果才相同；不一致？基本该换:nth-of-type
临时加一条
div:nth-child(3) { outline: 2px solid red; }，看红框套住谁；再换成div:nth-of-type(3)对比差异——这是最直觉的调试方式。容易被忽略的底层细节
这两个伪类都不匹配伪元素（如
::before），也不把自闭合标签（<img>、<input>）当作“类型可计数”的兄弟：它们参与:nth-child计数，但不会进入:nth-of-type的同类筛选池。真正难的不是语法，而是盯着 DOM 结构脑内分组计数——每次写之前，先默念一遍：“我要选的是第几个
p，不是第几个位置”。混排结构太常见，而:nth-of-type()才是你默认该信任的那个。 - 右键目标
