:first-child失效的根本原因是目标元素并非父元素第一个子节点，换行、空格、注释等均生成真实DOM节点（#text或#comment）；:first-of-type则跳过非同类节点，只在同标签兄弟中取首个，抗干扰更强。
它根本不是父元素的第一个子节点——这是失效的绝对主因，不是bug，是设计如此。
为什么浏览器开发者工具里看着是第一个，:first-child 还是不生效？
因为 DOM 树里“第一个”不等于你肉眼看到的 HTML 换行后第一行。换行、缩进空格、HTML 注释 <!-- --> 全都会被解析成真实子节点（#text 或 #comment），把你的目标元素挤到第 2、第 3 位。
- 打开浏览器开发者工具 → 选中父元素 → 展开看子节点列表，逐个确认第一个是不是你要的标签（注意识别灰色的
#text和#comment） -
<ul>\n <li>A</li></ul>：换行符生成#text节点，li:first-child失效 -
<div><!-- tip --><p>内容</p></div>：注释是第一个子节点，p:first-child完全不匹配
什么时候该换用 :first-of-type？
绝大多数业务场景下，你真正想选的是“第一个 p”“第一个 li”，而不是“DOM 顺序上第一个且恰好是 p 的节点”。:first-of-type 自动跳过所有非同类节点，只在同标签兄弟中取首个。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
p:first-of-type在<div><h3>intro</h3><p>first</p><p>second</p></div>中稳稳命中第一个<p> -
li:first-of-type在新闻列表中穿插了<div class="ad">时依然有效 - 它不依赖结构“干净”，抗干扰强，语义更贴近实际需求
如果必须用 :first-child，怎么让它可靠生效？
只有当你明确依赖“绝对位置”时才需要它，比如重置容器首子元素的 margin-top，或强制首个子元素占满宽度。这时必须保证结构无干扰：
立即学习“前端免费学习笔记（深入）”；
- 删掉父元素开头的所有换行、空格、注释（HTML 压缩或模板引擎里关掉 whitespace 保留）
- 避免用
innerHTML +=动态插入——这会重建整个子树，所有节点索引重算，:first-child状态丢失 - 改用
appendChild()或insertAdjacentElement('beforeend', el)保证追加逻辑不破坏原有顺序 - 若父元素开头固定有其他标签（如
<header>），就别硬套:first-child，直接加 class 更可控
真正容易被忽略的是：哪怕你写对了选择器、结构也看似干净，只要服务端渲染注入了隐藏提示 <div class="tip">，或 Vue/React 渲染时自动加了注释节点，:first-child 就会静默失效——它不报错，只是不匹配。调试时永远先看子节点列表，而不是猜样式优先级。
