:first-child和:first-of-type匹配逻辑不同：前者要求目标是父元素首个子节点（含文本/注释干扰），后者只在同类型标签中找首个实例，抗干扰更强，调试需查看真实DOM结构。
二者根本不是同一套匹配逻辑，混用时样式失效几乎必然发生，且原因隐蔽难查。
为什么 :first-child 经常“选不到”第一个目标元素
它只看 DOM 子节点索引位置，要求目标元素必须是父元素子节点列表中索引为 0 的那个——哪怕前面只有一个换行、空格或 HTML 注释，都会生成 #text 或 <!-- --> 节点，让目标元素变成第二个、第三个子节点。
-
<div>\n<p>1</p><p>2</p></div>中，p:first-child不生效：换行符生成了文本节点，<p>实际是第二个子节点 -
<ul><!-- hint --><li>A</li></ul>中，li:first-child失效：注释节点占了首位 - 调试时务必在浏览器 Elements 面板里展开父元素，**逐个查看子节点（含
#text和<!-- -->）的真实顺序**，别信源码缩进
什么时候必须用 :first-of-type
当你想“找某类标签的第一个实例”，而不管它前面有没有其他标签、注释或空白时，:first-of-type 是唯一可靠选择。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
section h2:first-of-type能命中<section><svg></svg><h2>标题</h2></section>中的<h2>，而h2:first-child完全无效 -
div p:first-of-type在<div><h3>intro</h3><p>first</p><p>second</p></div>中仍能选中第一个<p> - 它自动跳过所有非元素节点（文本、注释），只在同名标签的兄弟中排序——这是它抗干扰的核心机制
- 注意：IE8 不支持
:first-of-type，如需兼容，得用 JS 补位
:first-child 和 :first-of-type 效果相同的边界情况
仅当父容器下**所有子节点都是同一标签，且无文本/注释节点干扰**时，二者结果才一致。
立即学习“前端免费学习笔记（深入）”；
-
<ul><li>A</li><li>B</li></ul>中，li:first-child和li:first-of-type都命中第一个<li> - 但只要插入一个
<!-- comment -->或一行空格，一致性就立刻被打破 - 真正容易被忽略的是：伪类选择器不读取你写的 HTML “意图”，只按最终解析出的 DOM 树节点序列和类型做机械匹配。写样式前，先看 Elements 面板里的真实结构，比猜更省时间
