:nth-of-type只认html标签名，不认class或id；如.item:nth-of-type(2)无效，因class不参与类型计数，真正生效的是div:nth-of-type(2)这类纯标签选择。
为什么:nth-of-type根本不看class名
因为 :nth-of-type() 的设计目标就是「按 HTML 标签名分组计数」，它压根不解析 class、id、属性或任何样式信息。写成 .card:nth-of-type(2) 是无效的——浏览器会直接忽略这个选择器，因为它把 .card 当作一个带类名的标签名去匹配，而实际 DOM 中没有叫 .card 的标签。
-
p:nth-of-type(2)只关心父容器下第二个<p></p>元素，不管它有没有class="intro"或id="main" - 哪怕所有
<p></p>都加了class="item"，.item:nth-of-type(2)依然不生效 - 想靠 class 控制顺序？得换思路：用
:is(.item):nth-of-type(2)（仅现代浏览器支持），或 JS 动态加序号类
混合标签时，DOM 结构稍一变动就失效
比如你写了 section:nth-of-type(2) .hero 想选第二个 <section></section> 里的 <div class="hero">，但若服务端模板多插入一个 <code><aside></aside> 或注释 <!-- banner -->，section:nth-of-type(2) 就可能变成第三个 <section></section>——不是选择器错了，是你数错了。
- HTML 注释和空白文本节点（换行缩进）不影响
:nth-of-type()计数，但<div>、<code><header></header>、<script></script>都会打断同类型序列 - React/Vue 渲染时，
v-if或key导致的条件性节点缺失，会让实际<section></section>数量少于预期 - 调试时别只看页面效果，要在 DevTools 的 Elements 面板里展开父节点，手动数一遍
<section></section>标签出现顺序 -
article:nth-of-type(2).content→ 匹配同时有article标签名和contentclass 的单个元素（几乎不存在） -
article:nth-of-type(2) .content→ ✅ 正确：选第二个<article></article>内任意层级的.content -
article:nth-of-type(2) > .content→ ❌ 只匹配直接子级.content，如果它藏在<section></section>里就不命中
空格漏写或写错位置，语义全变
:nth-of-type() 本身不穿透嵌套，它只作用于直接兄弟元素。要选“第 N 个某类标签内部的子元素”，必须靠空格明确后代关系。漏掉空格或误用 >，结果天差地别。
真正难的不是写法，是脑子里怎么数
每次写 :nth-of-type(n) 前，得先在脑内做一次「标签过滤」：把父容器下所有同名标签拎出来排成一队，再数第几个。这个过程没法靠肉眼直觉，尤其当 DOM 被框架、SSR 或 CMS 动态注入干扰后，序号很容易漂移。
最稳妥的做法不是死磕伪类，而是给关键节点加稳定 class（如 data-index="3"），或用 JS 在渲染后动态标记——毕竟 CSS 伪类天生不适合处理动态结构。
