:nth-of-type只按标签名计数，与类名无关；div.item:nth-of-type(2)先筛选带item类的div再编号，而div:nth-of-type(2).item先取第2个div再验类；表格中需限定tbody作用域；选“第2个[data-active]按钮”需js或新语法button:nth-child(2 of [data-active])。
为什么 .item:nth-of-type(2) 总是不生效
它根本不会按类名筛选——:nth-of-type 只认标签名，.item 在这里只是附加条件，不是计数依据。浏览器先找出所有同级 div（假设目标是 div），再从中挑第 2 个，最后才检查它有没有 item 类。如果第 2 个 div 没有这个类，整条规则就失效。
常见误判场景：
- 父容器里有
<div></div>、<p></p>、<div class="item"></div>，你以为这是第 2 个div，但它其实是第 3 个——中间那个<p></p>不参与计数，但会把后续div的序号往后推 - HTML 源码中两个标签之间有换行+缩进，DOM 里会生成
Text节点，:nth-of-type不理它，但人眼容易误判“第一个子元素”位置 - 用了
display: contents或visibility: hidden，元素视觉上没了，但仍在计数序列里
div.item:nth-of-type(2) 和 div:nth-of-type(2).item 有区别吗
有，而且关键在解析顺序。前者是「先限定是 div 且带 item 类，再在这类元素中按 div 类型编号」；后者被浏览器解析为「先取第 2 个 div，再检查它是否含 item 类」——一旦第 2 个 div 没这个类，样式就丢弃。
实操建议：
- 永远把类名/属性写在伪类前面：
div.item:nth-of-type(2)是稳定写法 - 别依赖「第 n 个 div 恰好有 class」这种巧合，DOM 稍微一变（比如 CMS 插入一个无 class 的
div），序号就偏了 - 用开发者工具选中父容器，右键 → “Edit as HTML”，扫一眼子节点真实序列，比猜靠谱得多
表格里 tr:nth-of-type(odd) 为啥只染了第一行
因为 <thead> 和 <code><tbody> 是不同父容器。<code>tr:nth-of-type(odd) 如果直接写在 table 下，它会跨整个 table 计数，但 <thead> 里的 <code>tr 和 <tbody> 里的 <code>tr 并非同级兄弟——它们的父元素分别是 thead 和 tbody。
所以真正生效的是 thead tr:nth-of-type(1) 和 tbody tr:nth-of-type(1)，各算各的。你看到的“只染第一行”，大概率是 thead 那行被染了，而 tbody 里没加作用域限定。
正确做法：
- 明确限定作用域：
tbody tr:nth-of-type(odd) - 避免用
table tr:nth-of-type(odd)，它会把thead、tfoot全卷进来 - 如果未来可能插入
<tr class="summary"> 这类非数据行，<code>:nth-of-type比:nth-child更稳——它只数tr，不数其他类型真要选“第 2 个带
data-active的button”，该用什么CSS 原生做不到。因为
:nth-of-type和:nth-child都不支持「按属性值筛选后再编号」。你写的button[data-active]:nth-of-type(2)，仍是按所有button编号，不是按带data-active的button编号。目前唯一可靠解法是 JS：
document.querySelectorAll('button[data-active]')[1]?.classList.add('active');或者等
:nth-child(n of selector)全面落地（已进入 Baseline 支持）：button:nth-child(2 of [data-active])
但注意：这个语法目前仍需检查浏览器兼容性，Safari 17.4+、Chrome 120+、Firefox 122+ 才稳定支持，旧项目慎用。
最容易被忽略的一点：伪类永远按原始 DOM 顺序计算，和 flex/grid 排序、CSS transform 位移完全无关。哪怕你用
order把某个div拉到最前，div:nth-of-type(1)还是指源码里第一个同类型兄弟。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
