.item:nth-of-type(2) 不生效，因为它不按类名计数，而是先找父容器中第二个同标签元素（如第二个div），再检查其是否含item类；若该元素无此类，则规则失效，其余带类元素序号不参与计算。
为什么 .item:nth-of-type(2) 总是不生效
它根本不是在找“第二个 .item”，而是先找父容器里第二个 div（或你写的标签名），再检查这个 div 是否有 item 类。如果第二个 div 没这个类，样式就丢弃——浏览器压根不管其他带 item 的元素排第几。
常见失效场景：
-
<div></div> <p class="item">A</p> <div class="item">B</div>：这里div.item:nth-of-type(2)不匹配，因为只有一个div，:nth-of-type(2)无从谈起 - 服务端模板插入了
<script></script>或<header></header>，导致目标div实际是第 4 个，但你还写div:nth-of-type(2) - React 中用
v-if或key控制渲染，实际 DOM 里只有 1 个div，但你按设计稿写了:nth-of-type(2)
div.item:nth-of-type(2) 和 div:nth-of-type(2).item 有区别吗
有，解析顺序不同，结果可能完全不同：
-
div.item:nth-of-type(2)：先筛选出所有带item类的div，再在这批div里按div类型编号 → 更接近你想表达的语义 -
div:nth-of-type(2).item：先取第 2 个div，再检查它有没有item类 → 一旦第 2 个div没这个类，整条规则失效
实操建议始终把类名写在伪类前面：div.item:nth-of-type(2) 是更可控的写法。
立即学习“前端免费学习笔记（深入）”；
想选“第 N 个带某 class 的元素”，该用什么替代方案
CSS 原生没有 :nth-of-class()，硬套 :nth-of-type 就是反复踩坑。可行路径：
- 现代浏览器可用
:is(.item):nth-of-type(2)（Chromium 115+ / Firefox 119+ / Safari 16.4+） - 构建时加稳定序号类：
<div class="item item-2">，再写 <code>.item-2 - JS 渲染后遍历并设
data-index="2"，用[data-index="2"]选择 - 放弃序号逻辑，改用语义化类名：
.item--primary、.item--secondary
别指望靠肉眼数 DOM 节点顺序来写 :nth-of-type(n)——只要结构一动，序号就漂移。真正难的不是语法，是你脑内构建的节点序列和浏览器实际解析的不一致。
