:first-child要求元素既是父元素第一个子节点又是指定标签，因注释、换行等生成的文本节点常致失效；:first-of-type则跳过非目标类型节点，只取同类型中首个，更鲁棒。
因为它们名字太像，但匹配逻辑完全不同——一个看“位置”，一个看“类型”，而 HTML 源码缩进和注释会让 DOM 结构和你“以为的结构”不一致。
为什么:first-child经常“选不到”第一个p或li
它只认 DOM 子节点的绝对顺序：p:first-child 要求那个 p 必须是父元素子节点列表中索引为 0 的节点，且标签名得是 p。但只要前面有换行、空格、HTML 注释（<!-- hint -->）、<script></script> 或服务端注入的隐藏 div，就会生成一个 #text 或 <!-- --> 节点，把 p 推到第 2 位甚至更后。
-
<ul>\n<li>A</li> </ul>→li:first-child失效（换行生成文本节点） -
<div> <!-- tip --><p>段落</p> </div>→p:first-child完全不匹配 - 调试时别信源码缩进，一定要在浏览器「Elements」面板里展开父节点，逐个看清真实子节点序列
:first-of-type是怎么绕过这些干扰的
p:first-of-type 不看位置，只扫描父元素所有子节点，把所有 p 标签拎出来按 DOM 顺序排个序，取第一个。文本节点、注释、h2、div 全被跳过。
-
<section><svg></svg><h2>标题</h2></section>→h2:first-of-type有效，h2:first-child无效 -
<div> <h3>intro</h3> <p>first</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5092" title="PigX UI 前端开发"><img src="https://img.php.cn/upload/skill/000/000/081/179033410052138.jpg" alt="PigX UI 前端开发" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5092" title="PigX UI 前端开发" class="overflowclass">PigX UI 前端开发</a> <p class="overflowclass">PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。</p> </div> <a rel="nofollow" href="/xiazai/skill5092" title="PigX UI 前端开发" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p>second</p> </div>→p:first-of-type稳稳命中第一个p - 它对自定义元素也有效：
my-button:first-of-type匹配同级中第一个<my-button></my-button>
什么时候必须用:first-child
只有当你真正依赖“结构顺序”，而不是“类型顺序”时才需要它：
- 强制让容器第一个子元素占满宽度，不管它是
h1、img还是div：*:first-child { width: 100%; } - 重置首子元素的
margin-top，且你 100% 确保它永远是你要重置的那类标签 - 配合
:not()做精细过滤，比如li:first-child:not(.disabled) - 注意：
div:first-child和div:first-of-type在纯div子节点结构中结果一致，但只要加一行空格或一个注释，一致性立刻崩塌
真正容易被忽略的关键细节
两者都只作用于**直接子元素**（除非你写后代选择器如 article p:first-of-type）；:first-of-type 的“类型”仅指 HTML 标签名，和 class、id、data- 属性完全无关；display: none 的元素仍参与计数；IE9+ 全支持，无需降级。
嵌套层级最易出错：比如 ul li ul li:first-of-type，它匹配的是内层 ul 中第一个 li，不是外层 ul 的某个子项。写之前，务必在 Elements 面板里看清真实子节点序列——伪类选择器不读取你写的 HTML “意图”，只按最终解析出的 DOM 树做机械匹配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
