选第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 class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </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 元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
