必须用:nth-of-type时：需精准控制某类标签自身顺序且DOM含其他类型兄弟节点，如文章中交错的<h2><p><blockquote>里选“第3个段落”应写p:nth-of-type(3)；而:nth-child按父容器所有子元素物理位置计数，含注释、文本节点等，易因结构不纯失效。
选 :nth-of-type 还是 :nth-child，取决于你真正想“数”的东西：是「同标签的第几个」，还是「父容器里第几个位置」。 二者语义完全不同，混用必然出错，不存在“哪个更好”，只有“哪个更准”。
什么时候必须用 :nth-of-type
你要精准控制某类标签自身的顺序，且 DOM 中存在其他类型兄弟节点时，:nth-of-type 是唯一可靠选择。
- 常见场景：文章正文里
<h2>、<p>、<blockquote>交错，你想给「第 3 个段落」加边框 → 写p:nth-of-type(3) - 如果写
p:nth-child(3)，而第 3 个子元素恰好是<div class="ad">，那它完全不匹配 -
:nth-of-type对注释、文本节点、其他标签完全免疫——它们只占位，不参与计数 - 复合选择器中，
:nth-of-type只作用于紧邻的标签名：.post p:nth-of-type(2)合法；.post:nth-of-type(2) p无效（div不支持:nth-of-type）
什么时候只能用 :nth-child
你需要按物理位置做样式控制，且目标元素在该位置上“恰好是你想要的标签”——典型如干净列表、表格行、纯组件容器。
- 常见场景：一个无干扰的
<ul>，里面全是<li>，你想实现斑马纹 →li:nth-child(odd)更直观 - 想给「父容器中第 2 个子元素」加粗，不管它是不是
<p>→ 必须用:nth-child(2)，再加类型限定：p:nth-child(2) - 注意：空白文本节点（换行、缩进）会被
:nth-child计入，但不会被渲染为可见内容，容易导致序号误判 -
:nth-child(2n)和:nth-of-type(2n)行为差异极大：前者选所有偶数位置的子元素，后者只选偶数序号的同类型元素
为什么写了却没生效？先查这三处
失效极少因语法错误，多因 DOM 理解偏差或优先级覆盖。
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器开发者工具，看目标元素的 Computed 标签页，确认该规则是否真的命中（常被更高权重的选择器压住）
- 检查父容器实际子节点构成：用
console.dir(element.parentNode.childNodes)查看是否混有注释、文本节点或意外标签 - 验证标签名大小写：HTML 中
<LI>和<li>视为同一 type；但在 XHTML 或自定义元素中需严格一致 - 别写
li:nth-child(2):nth-of-type(3)—— 一个元素不可能同时是第 2 个子元素又是第 3 个<li>，整个选择器直接丢弃
复杂结构下更稳的替代思路
当父容器结构不可控（比如 CMS 输出、第三方组件嵌入），硬套 :nth-of-type 或 :nth-child 都容易翻车。
- 加 wrapper 层：把目标元素每 N 个包进一个
<section>，再用section:nth-child(n) > *控制 - 用 JS 打 class：动态遍历并添加
data-index="2"或nth-2类，CSS 直接写[data-index="2"] - Grid 场景优先用轨道控制：设
grid-template-columns: repeat(3, 1fr)，再用:nth-child(3n)选每行末尾，比依赖类型计数更可靠 -
display: contents慎用：虽能让子元素成为视觉同级，但会破坏可访问性树，在旧版 Safari 和部分 WebView 中不支持
最常被忽略的一点：伪类选择器不感知布局，也不读取渲染后的位置。所谓“第 2 行第 3 列”，CSS 本身无法表达，:nth-of-type 和 :nth-child 都只认 DOM 树里的原始顺序。
