选第2个：:nth-child(n)按父元素所有子元素总序号匹配，:nth-of-type(n)按同类型元素顺序匹配；前者易受空白文本、注释等干扰，后者更稳定可靠。
选第几个？先看“数谁”
根本区别就一句话：:nth-child(n) 数父元素下**所有子元素的总序号**，:nth-of-type(n) 数**同标签类型中第几个**。样式不生效，90% 是因为没想清楚自己到底想“按位置选”还是“按类型顺序选”。
p:nth-child(2) 只认“第二个座位”，且必须坐的是 p——如果第二个子元素是 div 或注释节点，哪怕后面有十个 p，它也不匹配任何元素。p:nth-of-type(2) 不管前面插了多少 h3、span 或换行产生的空白文本节点，只要它是父元素里出现的第二个 p，就稳稳命中。
DOM 中有空白或混排时，:nth-child 容易偏移
HTML 里的换行缩进、注释 <!-- -->、textNode 都算子元素，会悄悄改变 :nth-child 的计数结果。而 :nth-of-type 完全免疫这类干扰。
-
p:nth-child(3)在<div><h2>标题</h2><span>副标</span><p>正文</p></div>中能匹配，因为p是第三个子元素 - 但把中间加个换行：
<div><h2>标题</h2>\n<span>副标</span>\n<p>正文</p></div>，换行生成的 textNode 会变成第二个子元素，p变成第四个，:nth-child(3)就失效了 -
p:nth-of-type(1)在这两种结构里都稳稳选中那个p
什么时候该用哪个？看真实场景
选“列表里的第 3 项”，且列表项都是 li、结构干净——用 li:nth-child(3) 没问题；但一旦列表里夹了 li + div. separator + li，你就得切到 li:nth-of-type(3)。
立即学习“前端免费学习笔记（深入）”；
常见混排结构：图文卡片（img + h3 + p + button）、表单字段组（label + input + span.error）、新闻摘要（h2 + time + p）——这些地方硬套 :nth-child 很容易“失焦”。
- 要给“第二段正文”加样式 → 用
p:nth-of-type(2) - 要给“父容器里从上往下数第 4 个元素，且它必须是按钮” → 用
button:nth-child(4) - 要隔行变色（偶数行）→
tr:nth-child(even)更常用，因为表格行通常是纯tr，但若tbody里混了tr.group-header，就得考虑tr:not(.group-header):nth-of-type(even)
一个容易被忽略的细节：伪类匹配发生在“选择器解析之后”
p:nth-child(2) 的执行逻辑是两步：先定位第 2 个子元素，再判断它是不是 p；而 p:nth-of-type(2) 是先收集所有 p，再取第 2 个。这意味着，哪怕你写的是 article p:nth-child(2)，它依然只看 p 的父元素（即 article 直接子元素），而不是整个 article 树。
换句话说，伪类作用域永远是**直接父元素下的兄弟节点**，不会跨层或递归。很多人误以为 section p:nth-of-type(2) 能选中 section 下第二层的 p，其实不能——它只统计 section 的直接子 p 元素。
