:first-child常失效是因为它严格匹配父元素第一个子节点，而空格、换行或注释会生成文本/注释节点使目标元素失去首位；应改用:first-of-type，它只在同类型兄弟中选首个，抗干扰更强。
:first-child 只看位置，:first-of-type 只看标签类型。二者表面相似，但匹配逻辑完全不同，混用会导致样式失效且难以定位原因。
为什么 :first-child 经常“选不到”第一个目标元素
它要求目标元素**必须是父元素子节点列表中的第一个**，哪怕前面只有一个空格、换行或 HTML 注释，都会生成文本节点或注释节点，导致匹配失败。
-
<ul> <!-- hint --><li>A</li> </ul>中，li:first-child不生效——因为第一个子节点是注释，不是<li> -
<div>\n <p>1</p>\n <p>2</p>\n</div>中，p:first-child也不生效——换行和缩进生成了空白文本节点，<p></p>实际是第二个子节点 - 调试时务必在浏览器开发者工具的「Elements」面板里展开父元素，**逐个查看子节点（含 #text 和 ）的真实顺序**
什么时候必须用 :first-of-type
当你想“找某类标签的第一个实例”，而不管它前面有没有其他标签、注释或空白时，:first-of-type 是唯一可靠选择。
-
section h2:first-of-type能命中<section><svg>...</svg><h2>标题</h2></section>中的<h2></h2>，而h2:first-child完全无效 -
div p:first-of-type在<div> <h3>intro</h3> <p>first</p> <p>second</p> </div>中仍能选中第一个<p></p> - 它自动跳过所有非元素节点（文本、注释），只在同名标签的兄弟中排序——这是它抗干扰的核心机制
:first-child 和 :first-of-type 效果相同的边界情况
仅当父容器下**所有子节点都是同一标签，且无文本/注释节点干扰**时，二者结果才一致。
-
<ul> <li>A</li> <li>B</li> </ul>：此时li:first-child和li:first-of-type都命中第一个<li> - 但只要插入一个
<span></span>或一行空格，一致性就立刻被打破 - 不要依赖“看起来一样”的 HTML 源码缩进——DOM 解析后它们早已不同
真正容易被忽略的是：伪类选择器不读取你写的 HTML “意图”，只按最终解析出的 DOM 树节点序列和类型做机械匹配。写样式前，先看 Elements 面板里的真实结构，比猜更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
