应使用:nth-of-type()当需选中某标签类型第n个元素且其前存在其他类型标签时；它仅按同名标签计数，忽略伪元素、文本节点及属性，而:nth-child()则按所有子元素顺序计数。
什么时候该用 :nth-of-type() 而不是 :nth-child()
当你要选中「某类标签的第 N 个」，且它前面可能混着其他标签时，:nth-of-type() 才是正确选择。比如父容器里有 <p></p>、<div>、<code><p></p>、<span></span>、<p></p>，你想让第 2 个 <p></p> 变红——用 :nth-child(3) 会错（它是第 3 个子元素），但 p:nth-of-type(2) 精准命中。
:nth-of-type(n) 的常见写法和陷阱
它的参数规则和 :nth-child() 完全一致，但计数范围只限「同标签名」。容易出错的地方：
-
div:nth-of-type(2n)选的是所有<div> 中偶数位置的（第 2、4、6…个 <code><div>），不是页面中所有偶数子元素<li>它不认 class 或属性，<code>div.red:nth-of-type(1)和div:nth-of-type(1)效果一样——只要第一个<div> 存在，就匹配，不管它有没有 <code>class="red" -
伪元素（如
::before）和文本节点完全不影响它的计数，只看开始标签名 - 动态插入新
<p></p>后，原有元素的序号可能变化，样式自动重算，但 JS 获取的 NodeList 不会自动更新 -
document.querySelector('p:nth-of-type(1)')返回的是第一个<p></p>元素，不是第一个子元素中是<p></p>的那个（这点常被误读） - 如果想用 JS 模拟“取第 N 个某类型元素”，更稳妥的是：
Array.from(document.querySelectorAll('p')).at(n - 1)，避免被中间混入的其他标签干扰 - 需要选中「第 3 个子元素，且它必须是
<section></section>」→ 用: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 控制 - 复杂嵌套下反复调试不到预期效果？大概率是忽略了父级中隐藏的
<template></template>、注释节点或空格文本节点——它们不算:nth-of-type的计数对象，但会影响:nth-child，这种差异恰恰是最容易漏查的点
和 JavaScript 的 querySelectorAll() 行为对比
CSS 的 :nth-of-type() 是渲染时静态匹配，而 JS 的 document.querySelectorAll('p:nth-of-type(2)') 也遵循同样逻辑——但它依赖浏览器当前 DOM 结构。注意：
替代方案：什么时候不该用 :nth-of-type()
如果你的目标元素本身就有稳定 class、data 属性或结构位置（比如固定在某个容器第 3 层），直接加 class 或用更明确的选择器反而更可靠：
立即学习“前端免费学习笔记（深入）”；
