:nth-of-type() 按同类型标签在兄弟节点中的顺序计数，而非所有子元素的结构顺序；它忽略文本节点、注释等非元素节点，与 :nth-child() 逻辑本质不同。
为什么 :nth-of-type() 有时选不到你想要的元素
它只看兄弟节点中的「同类型标签」，不是按你在 HTML 里写的第几个子元素来数。比如父容器里有 <div>、<p>、<div>，那第二个 <div> 是 :nth-of-type(2)，但它是整个子列表里的第三个子节点。
- 常见错误现象：
div:nth-of-type(1)没生效，其实是前面有个<h2>或注释节点占了位置，但它不参与:nth-of-type计数 - 使用场景：想选中某类标签在兄弟中的位置（如“第一个表格行”
tr:nth-of-type(1)），而不是“第一个子元素” -
:nth-of-type(2n)和:nth-child(2n)效果可能完全不同——前者只筛同标签，后者对所有子节点统一编号
:nth-of-type() 和 :nth-child() 到底该用哪个
取决于你关心的是「类型顺序」还是「结构顺序」。多数人误以为二者等价，其实它们的计数逻辑根本不同。
- 如果目标元素前面混着其他标签（比如
<span>、<em>），且你只想选「第 n 个<p>」，用p:nth-of-type(n) - 如果要严格按 DOM 树位置选（比如“每两个子元素中选第二个”，不管标签名），必须用
:nth-child(n) - 性能上没差别，但可维护性有差异：用错类型容易导致样式突然失效，尤其后续有人往中间插新标签时
写 :nth-of-type() 表达式时的三个易错点
看似简单，实际常因括号、空格或单位缺失导致整个规则不触发。
- 括号必须是英文半角，
div:nth-of-type(2n+1)中的空格合法，但div:nth-of-type（2n+1）（中文括号）直接无效 -
2n+0可简写为2n，但n+0不能省成n——n是无效语法，浏览器会忽略整条规则 - 负系数支持有限：
:nth-of-type(-n+3)能选前 3 个，但部分老版本 Safari 对负号解析不稳定，线上建议避开-n写法
当父容器里有文本节点或注释时怎么办
:nth-of-type() 完全无视文本节点、注释、<script> 等非元素节点，这点和 :nth-child() 一致。但很多人调试时卡在这儿，以为是选择器问题，其实是 HTML 结构干扰了预期。
立即学习 “ 前端免费学习笔记（深入）”；
- 常见错误现象：模板引擎渲染后多了换行或空格文本节点，导致视觉上“第一个
<li>”实际是第二个子节点，但li:nth-of-type(1)仍能命中——因为它不看文本节点 - 验证方法：打开 DevTools → Elements 面板，右键父容器 →“Edit as HTML”，删掉所有换行和空格再试；或用 JS 执行
parent.children查看真实元素子节点列表 - 真正麻烦的是动态插入内容后结构变化——比如 JS 插入一个
<div>在两个<p>中间，p:nth-of-type(2)就会指向原来第三个<p>
最隐蔽的坑在于：你以为在控制样式顺序，其实是在依赖 DOM 的标签分布稳定性。一旦结构微调，:nth-of-type() 的行为就可能和视觉预期脱节。
