: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 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: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。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
