:first-child不匹配目标元素是因为它严格匹配父元素第一个子节点且标签名必须一致；若首个节点是换行符生成的文本节点或注释，即失效；应改用:first-of-type。
为什么 :first-child 总是不匹配目标元素
因为它根本不是在找“你认为的第一个”，而是在检查「目标元素是否恰好是父元素 childNodes[0]，且标签名完全一致」。哪怕 DOM 里第一个节点只是换行符生成的 #text 节点，:first-child 就直接跳过——它不跳过、不忽略、不宽容。
:first-child 和 :first-of-type 的本质区别
前者看位置，后者看类型+顺序：
-
:first-child：父元素子节点列表中索引为 0 的那个，且必须是p、li或你写的任意标签——差一个位置或一个标签名，全无效 -
:first-of-type：在所有同名兄弟元素中，按 DOM 顺序排第一的那个——前面插个<h2></h2>、注释或空格文本节点，都不影响它命中 - 比如
<div> <h2>标题</h2> <p>首段</p> <p>次段</p> </div>：p:first-child不匹配（<p></p>是第二个子节点）p:first-of-type匹配第一个<p></p>
怎么快速确认是不是被空白或注释节点干扰
别猜，直接查 DOM 结构：
- 打开浏览器开发者工具 → 选中父元素 → 展开子节点，看第一个是不是
#text或<!-- ... --> - 在控制台执行：
document.querySelector('.your-parent').childNodes，观察输出数组开头是什么 - 临时加一条调试样式：
.your-parent > * { outline: 1px solid red; }，再数红色框——但注意：这个只显示 Element 节点，#text和注释不会被 outline 到，所以不能替代childNodes检查
真正要稳定控制“第一个某类元素”时该怎么做
除非你明确需要“结构上第一个子节点”，否则别赌 :first-child 的干净 DOM：
- 优先用
:first-of-type替代 —— 语义更准，抗干扰强，IE9+ 全支持 - 如果项目必须兼容 IE8，就放弃伪类，改用 JS 添加 class：
el.parentNode.querySelector('p').classList.add('first-p') - 模板渲染阶段主动控制：Vue/React 中用
v-if或条件渲染确保首个元素前无注释；服务端模板避免在父标签后直接换行写子标签 - 不要依赖
:first-child做关键布局逻辑——它太脆弱，一个看不见的换行就能让整块样式失效
DOM 里的文本节点和注释节点不占视觉空间，但会彻底改写 CSS 选择器的计算逻辑。这点最容易被忽略，也最难排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
