:first-child匹配失败是因为HTML注释作为Comment节点（nodeType=8）占据父元素首个子节点位置，导致目标元素无法满足“首个子节点”条件；而:first-of-type则忽略注释等非同类型节点，仅在同类型元素中找第一个。
为什么:first-child在父元素开头有注释时完全不匹配
:first-child 不是“找第一个 p 或 li”，而是检查目标元素是否**恰好等于父元素的 childNodes[0]**。HTML 注释 <!-- ... --> 在 DOM 中会被解析为一个 Comment 节点，它和文本节点一样，是合法的子节点——只要它排在最前，:first-child 就跳过所有后续元素，直接判定失败。
常见现象：ul > li:first-child 在下面这种结构里根本不会生效：
<ul> <!-- 列表说明 --> <li>Item 1</li> <li>Item 2</li> </ul>
因为 ul 的第一个子节点是 Comment，不是 li。
如何快速确认是不是注释或空白文本节点导致失效
别靠肉眼猜 HTML 换行是否“干净”，直接查 DOM：
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器开发者工具 → 选中父元素 → 展开子节点，看第一个是不是
#comment或#text - 在控制台执行：
document.querySelector('ul').childNodes，观察输出数组第一项的nodeType（8 是注释，3 是文本） - 临时加调试样式：
ul > * { outline: 1px solid red; }—— 注意：这个只显示 Element 节点，#text和注释不会被 outline 到，所以不能替代childNodes检查
:first-child 和 :first-of-type 在注释存在时的行为差异
两者逻辑完全不同：
-
:first-child：要求目标元素必须是父元素的第一个子节点，且标签名一致；前面插个<!-->或换行空格，立刻失效 -
:first-of-type：忽略所有非同类型节点（包括注释、文本、其他标签），只在所有li兄弟中找 DOM 顺序第一个；上面那个带注释的ul里，li:first-of-type仍能命中Item 1
多数业务场景下你真正想要的是“第一个 li”，而不是“DOM 结构上第一个子节点”——前者用 :first-of-type 更准、更稳。
动态插入元素后 :first-child 失效怎么办
JS 插入时，appendChild() 或 innerHTML = '...' 都不会自动把新元素塞到最前；如果父元素已有注释或文本节点，新元素大概率不是 :first-child。
- 想让它成为
:first-child，必须显式置顶：parent.prepend(newEl)或parent.insertAdjacentElement('afterbegin', newEl) - 但前提是插入前父元素开头没有干扰节点；否则仍需先清理或改用
:first-of-type - Vue/React 中，模板里写成
<ul><!-- comment --><li>.../ul>同样会让渲染后的li:first-child失效——框架不自动过滤注释节点
DOM 里的注释和空白文本节点不占视觉空间，但会彻底改写 CSS 选择器的计算路径。这点没有 warning，也没有报错，只能靠 childNodes 看得见。
