:first-child严格匹配父元素第一个子节点，易因换行、空格等文本节点失效；:first-of-type更可靠，只匹配同类型首个元素，且免疫模板注入干扰。
为什么:first-child总选错元素
它根本不是“选第一个看起来像的”，而是严格认 DOM 树里 parentNode.childNodes[0] 是不是你写的那个标签。哪怕前面只有一个换行、一个空格、一条 <!-- 注释 -->，目标元素就自动变成第二个子节点，:first-child 立刻失效。
常见现象包括：ul li:first-child 没加边框、article > p:first-child 完全没反应、JS 动态插入后样式突然消失——这些几乎全是文本节点或前置元素干扰导致的。
用浏览器开发者工具（F12）展开父元素，看子节点列表：如果第一个是 #text 或 #comment，那问题就定位了。
用:first-of-type替代是最稳妥的方案
当你真正想选“第一个出现的 li”“第一个 p”“第一个 ul”，而不是“父元素结构上绝对排第一的子元素”，:first-of-type 就是更符合直觉的选择。
-
li:first-child要求li是父元素第一个子节点；li:first-of-type只要求它是所有li中第一个出现的，前面夹着<h2></h2>或空格都不影响 - 模板引擎（如 Nunjucks、Django）常悄悄注入换行或注释，
:first-of-type天然免疫这类干扰 - 写
ul.sideul:not(:first-of-type)比ul.sideul:not(:first-child)更可靠，后者实际匹配的是外层div的第一个子元素，不是ul
避免子选择器层级误匹配
写 ul li ul li:first-child 本意可能是“每个子菜单的第一项”，但它实际匹配的是“子 ul 下第一个子节点且是 li”，而这个子 ul 开头很可能有换行，导致匹配失败。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
更安全的写法是：
ul li ul li:first-of-type
或者直接锁定层级：
ul > li > ul > li:first-child
注意：> 只匹配直接子元素，能防止穿透到深层嵌套中误触发。
动态内容场景下别硬扛:first-child
JS 插入元素后结构变复杂，或服务端渲染带不可控空白时，纯 CSS 很难保证 :first-child 始终命中。这时主动控制比被动等待更可靠：
- 插入后立即执行：
parent.children[0].classList.add('first')（children只返回元素节点，不包含文本/注释） - 给首项加
data-first属性，CSS 写li[data-first] { font-weight: bold; } - 服务端模板里禁用自动换行（如 Nunjucks 的
{%-和-%}）或用strip过滤空白
最常被忽略的一点：伪类无法穿透 Shadow DOM，如果你在 Web Component 里用 :first-child，得确认作用域是否在 light DOM 内部。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
