:first-child 失效是因为目标元素在 dom 中并非首个子节点，而是被空白文本、注释等占据首位；应优先使用 :first-of-type 提升鲁棒性，并避免 innerhtml += 等触发 dom 重建的操作。
为什么 :first-child 总是“看不见”第一个元素
它根本没失效，只是你写的那个元素在 DOM 里根本不是第一个子节点。浏览器严格按解析后的节点顺序匹配，不认缩进、不跳注释、不忽略换行——哪怕只多一个空格，:first-child 就立刻罢工。
- 打开开发者工具 → 展开父元素 → 逐个看子节点：如果第一个是
#text（空白文本）或<!-- comment -->，那你的目标元素就不可能被:first-child选中 -
<ul>\n <li>A</li> </ul>中的<li>实际是第二个子节点（换行生成了#text） - Vue/React 模板里常见的
<!--v-if-->或服务端注入的提示语，也会悄悄占据第一个位置
:first-child 和 :first-of-type 到底该用哪个
想选“父容器里第一个出现的 p”，但前面可能有 <header></header>、<svg></svg> 或空行？直接换 p:first-of-type —— 它自动跳过所有非 p 节点，只在 p 兄弟里排座次。
-
p:first-child：要求这个p必须是父元素的第一个子节点（类型不限） -
p:first-of-type：只要它是所有p中 DOM 顺序最靠前的那个，前面哪怕有十个div也不影响 - 多数业务场景（如列表首项加顶边框、文章首段加大字号）应该默认用
:first-of-type，鲁棒性高得多
动态插入后 :last-child 突然不生效
不是选择器坏了，是你插入方式触发了 DOM 重建。用 innerHTML += 会把整个子树删掉重绘，所有节点索引归零，原 :last-child 自然消失。
- ✅ 正确做法：
parent.appendChild(newLi)或parent.append(newLi)—— 新节点追加到末尾，自动成为:last-child - ❌ 错误写法：
parent.innerHTML += '<li>new</li>'—— 整个子内容被重新解析，旧节点全部销毁 - 更稳的替代思路：
li:not(:last-child) { margin-right: 12px; }，把“中间项才有的间距”显式定义出来，避免依赖末位状态
嵌套结构里 :first-child 容易误匹配
比如想给每个子菜单的第一项加图标，写成 ul li ul li:first-child 看似合理，但子 ul 内部若有换行或注释，这个 li 就不是它的第一个子节点，样式直接失效。
- 嵌套时优先用
:first-of-type：ul li ul li:first-of-type更可靠 - 若必须用
:first-child，确保子ul的 HTML 是紧凑无空格的：<ul><li>...</li></ul> - 注意：伪类永远只作用于**直接父容器**的子节点，不会跨层穿透；
ul li:first-child匹配的是ul下第一个li，不是整个 DOM 树里第一个li
真实 DOM 结构和你写的 HTML 源码从来不是一回事。调试前先看 Elements 面板里的子节点列表，比反复改 CSS 更快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
