:nth-of-type只按同标签兄弟节点编号，忽略其他类型元素和注释，但不忽略文本节点；它不支持类名筛选或CSS变量，动态需求需JS配合。
为什么 :nth-of-type 总是数错位置
它根本不是在“所有子元素里找第几个目标”，而是只看同标签名的兄弟节点，从 1 开始硬编号。中间夹一个 <div>、<code><h2></h2>、甚至 HTML 注释 <!-- -->，都不会打断计数——但它们会让开发者手动数的时候误判起始点。
常见错误现象：p:nth-of-type(2) 没生效，其实是因为你忘了父容器第一个子元素是 <h2></h2>，第一个 <p></p> 是第二个子元素，但它就是 :nth-of-type(1)；第二个 <p></p> 才是 :nth-of-type(2)，但你误以为它是第三个。
- 打开 DevTools → 右键父元素 → “Edit as HTML”，亲手数所有目标标签（比如所有
p），忽略其他类型 - 临时加
p { outline: 1px solid red; }确认哪些节点真是p元素（display: contents或visibility: hidden不影响计数） - 服务端模板或 Markdown 渲染器插入的空行、注释，都会让 DOM 结构和你写的 HTML 源码不一致
div.item:nth-of-type(2) 为什么永远不按你想的来
这个写法语义上就是错的。:nth-of-type() 的括号里只认标签名，.item 是附加条件，不参与编号。浏览器执行逻辑是：先找出父元素下所有 <div>，按顺序编 1、2、3…；再从中挑出第 2 个，并检查它有没有 <code>item 类。
所以它匹配的是「第 2 个 <div>」，不是「第 2 个带 <code>item 类的 <div>」。如果中间穿插了其他 <code><div>（哪怕没 class），目标元素就变成 <code>:nth-of-type(3) 或更后。
立即学习“前端免费学习笔记（深入）”；
- 想选“第 2 个带
item的div”，CSS 原生做不到，得用 JS：document.querySelectorAll('div.item')[1] - Chrome 125+ / Firefox 127+ 支持新语法：
div:nth-child(2n of .item)，但旧版本必须绕开 - 别写
div:nth-of-type(2).item，它和上面完全等价，不是“先找第 2 个再筛类”
混排结构里该用 :nth-of-type 还是 :nth-child
关键区别在计数基准：:nth-of-type(n) 只统计同标签兄弟，:nth-child(n) 统计所有子元素位置后再判断类型。两者在混排时结果经常不一致。
例如父元素是 <div></div> <p>first</p> <div class="item"></div> <p>second</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/gongju/2905" title="CSS"><img
src="https://img.php.cn/upload/manual/000/969/633/6af2b1226ad9e733.png" alt="CSS" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/gongju/2905" title="CSS">CSS</a>
<p>CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。</p>
</div>
<a href="/xiazai/gongju/2905" title="CSS" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>：
-
div:nth-of-type(2)→ 匹配第二个<div>（即带 <code>item的那个） -
div:nth-child(3)→ 匹配第 3 个子元素，且必须是<div>（也是带 <code>item的那个） -
p:nth-of-type(2)→ 匹配第二个<p></p>（second） -
p:nth-child(4)→ 匹配第 4 个子元素，且是<p></p>（也是second） - 给目标元素加
data-index="3"，再用p[data-index="3"] - 批量加 class：
p--first、p--second，比伪类更稳定 - CSS-in-JS 或构建时预处理（如 Sass 循环）可生成固定规则，但仍是静态输出
真正容易被忽略的是：DOM 中的文本节点（换行、空格）会被 :nth-child 计入，但不影响 :nth-of-type；而注释节点两者都忽略。
:nth-of-type 和 CSS 变量、动态内容完全不兼容
它是纯静态选择器，不接受任何运行时值。写 p:nth-of-type(var(--n)) 或 p:nth-of-type(calc(2 + 1))，浏览器会直接忽略整条规则，控制台也不报错，静默失效。
真实项目里动态序号需求很常见，比如“第 N 个卡片高亮”，但必须靠 JS 驱动：
最麻烦的一点是：它看起来像能“智能筛选”，实际连类名都不认——所有你以为的“条件过滤”，都得在 JS 层做完，CSS 只负责收尾渲染。
