:nth-child数所有子节点位置，nth-of-type只数同标签兄弟；前者易因注释、空格、其他标签导致失效，后者在富文本等结构不可控场景更可靠。
别硬记规则，先看 DOM 结构里“第几个”到底指谁——:nth-child数的是所有子节点位置，:nth-of-type只数同标签兄弟。绝大多数混淆失效，都卡在这一步。
为什么 li:nth-child(2) 总是不生效
它不是在找“第二个 li”，而是在找“父元素下第 2 个子节点，且这个节点恰好是 li”。只要第 2 个子节点是注释、<div>、换行产生的空白文本节点，整个选择器就静默失败。
- 打开 DevTools → 右键父元素 → “Edit as HTML”，看清真实子节点顺序（不是折叠后的“Elements”视图）
- 常见干扰源：
<!-- header -->、<script>、缩进换行生成的文本节点、CMS 插入的广告<li class="ad"> -
ul li:nth-child(2)在纯列表中有效，但一旦服务端模板加了一行注释，序号立刻偏移
p:nth-of-type(2) 怎么做到“稳中带准”
它内部执行两步：先过滤出所有 p 标签，再对它们单独编号。前面插了 5 个 <h3>、3 个 <div>、1 条注释，都不影响计数——第 2 个 p 就是第 2 个 p。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 适用场景明确：富文本输出、Markdown 渲染、用户可编辑区域等结构不可控环境
- 注意：
div.foo:nth-of-type(2)中的.foo不参与类型判断，只作为附加筛选；真正计数的是所有div标签 - 伪元素（
::before）、自闭合标签（<img>、<input>）不进入:nth-of-type的同类筛选池，但会参与:nth-child计数
调试时一眼分清该用哪个
别猜，直接验证：在 DevTools 的 Styles 面板临时加一条 div:nth-child(3) { outline: 2px solid red; }，看红框套在谁身上；再换成 div:nth-of-type(3)，对比两次高亮对象是否一致。不一致？说明中间混了其他 div 或非 div 节点。
立即学习“前端免费学习笔记（深入）”；
- 想按视觉流式布局控制样式（比如表格整行隔色）→ 优先
:nth-child，但务必限定作用域，如tbody > tr:nth-child(odd) - 想按语义独立编号（比如所有段落、所有按钮）→ 必须
:nth-of-type - 两者连写（如
li:nth-child(2):nth-of-type(3)）永远不匹配——一个元素不可能同时是第 2 个子节点又是在所有li中排第 3
容易被忽略的底层细节
IE8 完全不支持 :nth-of-type；:nth-child(0) 无效（n 必须 ≥ 1）；odd/even 关键字严格小写；<LI> 和 <li> 在 HTML 中视为同一类型，但大小写混用在 XHTML 模式下可能出问题。最麻烦的从来不是语法，而是你脑内构建的 DOM 树和浏览器实际解析的不一致——每次写之前，手动画一画子节点分组，比查文档更快定位问题。
