p:nth-of-type(2)未选中是因为DOM中“视觉第二个p”实际不是第二个p兄弟节点；它只对同标签兄弟计数，无视注释、文本、其他标签及class，编号依据真实解析树而非编辑器视觉顺序。
为什么 p:nth-of-type(2) 没选中你看到的第二个 p
不是选择器写错了，而是你“看到的第二个 p”在 DOM 树里根本不是第二个 p 兄弟节点。浏览器按真实解析后的子节点顺序计数，而不是按你在编辑器里换行缩进的视觉顺序。比如这段 HTML：
<div> <h2>标题</h2> <p>第一段</p> <div class="ad"></div> <p>第二段</p> </div>
其中 p:nth-of-type(2) 确实会命中“第二段”，但如果你删掉中间那个 <div class="ad">，它还是命中——因为 <code>:nth-of-type 只数 p，别的都跳过。真正容易出错的是：你以为 DOM 里只有两个 p，结果服务端模板悄悄加了 <!-- comment -->，或 Markdown 渲染器插了空行文本节点，这些都不影响 :nth-of-type 计数，但会让你手动数错。
div.item:nth-of-type(2) 为什么完全不生效
:nth-of-type() 的括号里只认标签名，.item 是附加筛选条件，不参与编号。也就是说，div.item:nth-of-type(2) 的意思是：“先找出父元素下所有 div 元素，给它们从 1 开始编号；再从中挑出第 2 个，且这个 div 还得有 item 类”。如果父元素下是 <div></div>
<p></p>
<div class="item"></div>，那第一个 div 是 nth-of-type(1)，第二个 div（带 item）就是 nth-of-type(2) —— 它生效了；但如果中间夹了另一个 <div></div>，那带 item 的就变成 nth-of-type(3) 或更后。
- 别写
.item:nth-of-type(2)——.item不是 type，没用 - 也别指望
div:nth-of-type(2).item能“先找第 2 个再筛类”，它和上面等价，仍是先编号再筛选 - 想选“第 2 个带
item的div”，CSS 原生做不到，得用 JS：document.querySelectorAll('div.item')[1]
调试时怎么一眼看出 :nth-of-type 数的是谁
打开浏览器 DevTools，右键目标父元素 → “Edit as HTML”，看原始解析树。不要信 Elements 面板折叠后的样子，那里会隐藏文本节点、注释节点。你得亲手数：
- 忽略所有非目标标签（比如你想选
p，就跳过h2、div、script） - 把所有
p元素从上到下标上 1、2、3…，这就是:nth-of-type的编号依据 - 临时加一条
p { outline: 1px solid blue; }，确认哪些真是p元素（有时<p></p>被display: contents或visibility: hidden干扰，但计数照常）
你会发现，很多“失效”其实只是你数错了起始点——比如第一个 p 前面有个 <svg></svg> 或 <custom-element></custom-element>，它们也是独立 type，不影响 p 编号，但可能让你误判结构。
什么时候必须放弃 :nth-of-type 改用其他方案
当你要匹配的不是“第 N 个某标签”，而是“第 N 个带某属性/某类的元素”时，:nth-of-type 就力不从心了。例如：
-
button[data-status="active"]:nth-of-type(2)—— 它选的是所有button中第 2 个，不管data-status值 -
li.hidden:nth-of-type(3)—— 如果前两个li都没hidden类，那第 3 个带hidden的可能是nth-of-type(5) - 动态插入内容后，DOM 结构变化导致序号偏移，但你又无法控制插入位置
这种时候，硬靠 CSS 伪类只会越调越乱。更稳的做法是：用 JS 在渲染后打上明确序号 class，比如 button--active-2，再用 .button--active-2 控制样式。毕竟，:nth-of-type 的设计初衷就不是为语义筛选服务的，它只负责按标签类型做线性编号。
