:first-child失效的根本原因是目标元素并非父元素的第一个子节点，因注释（nodeType=8）或空白文本节点（nodeType=3）占据首位；:first-of-type则忽略非同类型节点，仅匹配同标签中首个出现的元素。
根本原因不是选择器写错了，而是目标元素在 DOM 中根本不是父元素的第一个子节点。哪怕 HTML 看起来“干净”，浏览器也会把注释 <!-- -->、换行符、空格缩进解析成 #comment 或 #text 节点——它们和 <li> 一样，都是合法子节点。只要排在最前，:first-child 就直接跳过后续所有元素。
为什么开发者工具里看着是第一个，但 :first-child 还是不生效
肉眼看到的“第一个”是渲染后视觉顺序，而 :first-child 只认 parentNode.childNodes[0] 的真实类型：
- 打开开发者工具 → 选中父元素 → 展开
childNodes，看第一项是不是#comment（nodeType=8）或#text（nodeType=3） - 在控制台执行
document.querySelector('ul').childNodes[0].nodeType，返回8或3就确认是干扰节点 -
outline: 1px solid red这类样式只作用于 Element 节点，#text和注释不会被框出，不能靠它判断结构
常见干扰源有哪些
这些看似“无害”的结构，都会让 :first-child 失效：
- HTML 中手写的注释：
<ul><!-- 列表说明 --><li>Item 1</li></ul> - Vue/React 模板里带注释的写法，框架渲染后仍保留
#comment节点 - 服务端模板（如 PHP、Jinja）生成 HTML 时自动插入的空格或换行
- JS 动态插入元素时没用
prepend()，而是用appendChild()或innerHTML +=，导致新元素不在最前
:first-child 和 :first-of-type 在这种场景下怎么选
除非你明确需要“DOM 结构上第一个子节点”，否则几乎都应该换用 :first-of-type：
立即学习“前端免费学习笔记（深入）”；
-
:first-child：检查childNodes[0]是否为指定标签 —— 前面插个<div>或换行，立刻失效 -
:first-of-type：遍历所有同名兄弟（比如所有<li>），取 DOM 顺序第一个 —— 注释、<h2>、空格文本全被忽略 - 兼容性：IE9+ 全支持
:first-of-type；若必须兼容 IE8，只能用 JS 添加 class，例如el.parentNode.querySelector('li').classList.add('first')
真正卡住的时候，往往不是 CSS 写错了，而是 DOM 里多了一个你看不见的节点 —— 它不占空间、不报错，但会彻底改写选择器的匹配逻辑。
