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