:first-child未生效的根本原因是它严格匹配父元素的第一个子元素且必须是同标签名；而:first-of-type则忽略其他类型节点，只匹配该类型中首个元素。
为什么 :first-child 看似匹配却没生效
根本原因往往不是选择器写错了，而是它严格匹配「父元素的第一个子元素」——且必须是同类型（同标签名）才触发样式。比如 A 这是最常混淆的点： 遇到不生效，别急着改 CSS，先确认 DOM 实际结构： 多数场景下，你真正想要的是「第一个某类元素」，而非「第一个子元素」： 立即学习“前端免费学习笔记（深入）”； 实际开发中，80% 的 div:first-child 永远不会生效，因为
:first-child 和 :first-of-type 的关键区别
:first-child 看位置，:first-of-type 看类型。当父容器里有注释、文本节点、其他标签混排时，差异立刻暴露：
:first-child：只认 DOM 树中「第一个子节点」，且该节点必须是目标标签:first-of-type：忽略其他类型节点，只找本类型中「最先出现的那个」，那么任何 :first-child 都不命中
结构排查三步法
document.querySelector('父选择器').children，检查 length 和各节点 tagName，确认目标元素是否真是第一个 Element
父选择器 > * { outline: 1px solid red; }，肉眼数清楚子元素顺序替代方案与兼容性提醒
:first-of-type 替代 :first-child，语义更贴近常见需求:nth-of-type(N) 更可靠:first-child 在 IE8+ 支持良好，但 :first-of-type 仅 IE9+，若需兼容 IE8，只能靠 JS 或额外 class 控制:first-child 仍按 DOM 顺序判断，不受 order 属性影响:first-child 失效都源于没意识到注释或空白文本节点的存在——DOM 树比你写的 HTML 多出几个隐形节点，这点最容易被忽略。
