:nth-child数父元素所有子节点总序号，易受空白、注释等干扰；:nth-of-type只数同类型元素序号，更稳定可靠。
别猜，直接看 DOM 结构树——:nth-child 数“座位号”，:nth-of-type 数“学号”。90% 的样式失效，是因为你本想按类型顺序选，却写了 :nth-child。
为什么 p:nth-child(2) 有时选中第一个 p，有时一个都不中？
因为它的逻辑是两步：先定位父元素的第 2 个子节点，再判断它是不是 p。只要第 2 个子节点不是 p（比如是 div、span、换行产生的 textNode，甚至注释 <!-- -->），整个选择器就匹配失败。
- 结构干净：
<div><p>1</p><p>2</p></div>→p:nth-child(2)匹配第二个p - 结构含干扰：
<div><p>1</p><div>sep</div><p>2</p></div>→ 第 2 个子节点是div，p:nth-child(2)不匹配任何元素 - 构建工具压缩 HTML 或服务端模板插入不可见节点后，开发环境有效、上线失效，大概率就是这个原因
为什么 p:nth-of-type(2) 在混排结构里更可靠？
它跳过所有非 p 元素，只收集父元素下所有 p 标签，然后取第 2 个。不管前面插了几个 h3、div、空格或注释，结果都稳定。
- 新闻卡片：
<article><h2>标题</h2><time>2026-09-03</time><p>正文第一段</p><p>正文第二段</p></article>→p:nth-of-type(2)稳稳命中第二段 - 表单字段组：
<label>用户名</label><input><span class="error">必填</span><label>邮箱</label><input>→input:nth-of-type(2)一定选中第二个input，不被label或span干扰 - 注意：
article p:nth-of-type(2)只作用于article的**直接子元素**中的p，不会递归找嵌套在section里的p
:nth-child(even) 和 :nth-of-type(even) 隔行变色效果为何常不同？
公式写法一样，但计数对象不同，导致最终匹配结果差异显著：
立即学习“前端免费学习笔记（深入）”；
-
tr:nth-child(even)：选父元素（如tbody）中第 2、4、6… 个子元素，且该元素必须是tr；若中间有tr.group-header，它仍占位，后续tr序号会被推后 -
tr:nth-of-type(even)：只遍历所有tr，取其中第 2、4、6… 个；tr.group-header是tr，也会被计入 —— 所以它更适合纯表格，但不适用于需要跳过特定类名的场景 - 真正要跳过
tr.group-header做隔行变色，得组合使用：tr:not(.group-header):nth-of-type(even)
什么时候必须用 :nth-child？
只有当你明确依赖“绝对位置”且结构可控时才需要它：
- 标准表格行：
tr:nth-child(even)安全，因thead/tbody/tfoot是独立容器，tr通常连续排列 - 纯
ul > li列表且确认中间绝无其他标签（包括服务端动态插入的li.ad或li.header）时，li:nth-child(3)和li:nth-of-type(3)效果相同 - 固定工具栏布局：
button:nth-child(3)要求“从左到右第 3 个位置上必须是按钮”，这是语义约束，不能妥协
真实项目里，HTML 很少干净。一旦出现混排、动态插入或构建流程引入不可见节点，:nth-of-type 就是保底方案。最省事的做法：打开浏览器开发者工具，展开父元素的子节点，数清楚目标元素前面到底有几个“孩子”——如果数字和预期不一致，立刻切到 :nth-of-type。
