:nth-of-type()只按HTML标签名计数，无视class、id等属性；如.item:nth-of-type(2)无效，因class不参与类型计数，真正生效的是div:nth-of-type(2)这类纯标签选择。
:nth-of-type() 根本不识别类名——它只看 HTML 标签名，.item、.card 这类 class 对它完全透明。你写 div.item:nth-of-type(2)，浏览器只当它是 div:nth-of-type(2)，class 部分仅作附加筛选（即：先找第 2 个 div，再检查它有没有 item 类），不是“第 2 个带 item 类的 div”。
为什么 .card:nth-of-type(2) 总是不生效？
这是最典型的误用：:nth-of-type() 的计数对象是标签名，不是 class。CSS 解析器会直接忽略点号前的 class 名，只按 div、li、p 等原始标签分组计数。
- ✅ 正确理解：
li.card:nth-of-type(2)→ 先在父容器中找出所有li元素，取其中第 2 个，再确认它是否带有card类 - ❌ 错误期待：
li.card:nth-of-type(2)被当成“第 2 个li.card元素”，但 DOM 中可能有li、div.card、li.card交错，导致第 2 个li.card实际是第 4 个li，于是匹配失败 - ⚠️ 注意空格：
li .card:nth-of-type(2)（带空格）完全不是你想表达的意思——它选的是li内部、第 2 个.card元素，且该.card必须是同类型兄弟中的第 2 个（比如第 2 个span.card或第 2 个div.card）
想选“第 N 个带某 class 的元素”，该用什么？
CSS 原生没有 :nth-of-class() 这种东西。遇到这类需求，必须换思路：
- 如果结构可控，把 class 提升为标签语义（例如用
<article></article>替代<div class="card">），再用 <code>article:nth-of-type(N) - 如果必须保留 class，改用 JS 动态加序号类：
document.querySelectorAll('.card').forEach((el, i) => el.classList.add(`card-${i + 1}`))，然后写.card-2 { ... } - 服务端渲染或构建时注入 data 属性：
<div class="card" data-index="2"></div>，再用属性选择器：div.card[data-index="2"] - 打开开发者工具，右键父容器 → “Edit as HTML”，手动数一遍同标签兄弟节点——别信视觉顺序，要信 DOM 树里的真实序列
- 检查是否有隐藏的文本节点（换行、空格）或注释节点干扰判断；它们不参与
:nth-of-type()计数，但会让你误以为“第 2 个”其实是第 3 个 - 确认目标元素确实是父容器的**直系子元素**；如果它被包在一层
<div class="wrapper"> 里，那它的 <code>:nth-of-type()是相对于那个 wrapper 计算的，不是你写的外层父容器真正难的不是记住语法，而是在写之前，强迫自己默念一遍：“我要选的是第几个
p，不是第几个.intro。”
调试时最容易被忽略的三件事
失效往往不是语法错，而是 DOM 理解偏差：
