:nth-of-type(n) 的常见写法和陷阱

它的参数规则和 :nth-child() 完全一致，但计数范围只限「同标签名」。容易出错的地方：

• div:nth-of-type(2n) 选的是所有 中偶数位置的（第 2、4、6…个 ），不是页面中所有偶数子元素
• 它不认 class 或属性，div.red:nth-of-type(1) 和 div:nth-of-type(1) 效果一样——只要第一个 存在，就匹配，不管它有没有 class="red"
• 伪元素（如 ::before）和文本节点完全不影响它的计数，只看开始标签名

和 JavaScript 的 querySelectorAll() 行为对比

CSS 的 :nth-of-type() 是渲染时静态匹配，而 JS 的 document.querySelectorAll('p:nth-of-type(2)') 也遵循同样逻辑——但它依赖浏览器当前 DOM 结构。注意：

• 动态插入新
  后，原有元素的序号可能变化，样式自动重算，但 JS 获取的 NodeList 不会自动更新
• document.querySelector('p:nth-of-type(1)') 返回的是第一个
  元素，不是第一个子元素中是
  的那个（这点常被误读）
• 如果想用 JS 模拟“取第 N 个某类型元素”，更稳妥的是：

  Array.from(document.querySelectorAll('p')).at(n - 1)

  ，避免被中间混入的其他标签干扰

替代方案：什么时候不该用 :nth-of-type()

如果你的目标元素本身就有稳定 class、data 属性或结构位置（比如固定在某个容器第 3 层），直接加 class 或用更明确的选择器反而更可靠：

• 需要选中「第 3 个子元素，且它必须是
  」→ 用 :nth-child(3 of section)（CSS Selectors Level 4，但目前仅 Safari/Chrome 119+ 支持，兼容性差）
• 要选中「带 data-role="item" 的第 2 个元素」→ 写 [data-role="item"]:nth-of-type(2) 没用（:nth-of-type 不感知属性），应改用 [data-role="item"]:nth-child(2) 或加 class 控制
• 复杂嵌套下反复调试不到预期效果？大概率是忽略了父级中隐藏的 、注释节点或空格文本节点——它们不算 :nth-of-type 的计数对象，但会影响 :nth-child，这种差异恰恰是最容易漏查的点