:first-child不生效是因为它要求目标元素必须是父元素的第一个子节点，而:first-of-type才匹配同类型中首个元素；注意文本节点、注释等也计入子节点顺序。
为什么 :first-child 有时不生效
很多人写 :first-child 想选中「第一个子元素」，结果样式没应用上。根本原因是：它匹配的是「父元素下第一个子节点，且该节点恰好是目标元素类型」。如果父元素第一个子节点是 <p></p>，而你想选中的是 <div>，那 <code>div:first-child 就不会命中——哪怕这个 <div> 是父元素里第一个 <code><div>。<h3> <code>:first-of-type 才是按类型找“第一个”
当你真正想选中「父元素中同类型元素里的第一个」，应该用 :first-of-type。它不关心前面有没有其他标签，只看当前元素类型在兄弟中是否排第一。
常见使用场景：
- 列表中第一个
<li>（不管前面有没有<h3></h3>或注释节点） - 卡片容器里第一个
<article></article>，即使前面有<header></header> - 表单中第一个
<input type="text">，忽略<label></label>和<button></button>
示例：
立即学习“前端免费学习笔记（深入）”；
<section> <h2>标题</h2> <p>段落1</p> <p>段落2</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/ai/1680" title="Getsound"><img src="https://img.php.cn/upload/ai_manual/000/969/633/68b6d583b2f65479.png" alt="Getsound" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/ai/1680" title="Getsound">Getsound</a> <p>基于当前天气条件生成个性化音景音乐</p> </div> <a href="/ai/1680" title="Getsound" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </section>p:first-child ❌ 不生效（<p></p> 不是第一个子节点）p:first-of-type ✅ 生效（它是所有 <p></p> 中的第一个）
注意空格、注释和文本节点的影响
css 结构伪类只看「元素节点」，但 dom 树里可能夹着文本节点（比如换行缩进）、HTML 注释 <!-- ... -->，这些都会影响 :first-child 的判断。
容易踩的坑：
- 写成多行 HTML 时，
<div>n <span>A</span>n <span>B</span>n</div>—— 开头换行会生成一个文本节点，导致span:first-child失效 - Vue/React 模板中动态插入注释（如
v-if编译残留），也可能让:first-child错位 - 服务端渲染或预处理后，空白字符未压缩，同样干扰结构判断
调试建议：打开浏览器开发者工具，右键检查父元素 → 「Elements」面板里观察实际子节点顺序（包括「#text」节点）。
更严格的定位：用 :nth-child(1) 还是 :nth-of-type(1)？
二者语义和行为与对应的第一类伪类完全一致：:nth-child(1) ≡ :first-child，:nth-of-type(1) ≡ :first-of-type。区别只在可读性和扩展性：
- 如果后续可能需要选第 2 个、偶数个，统一用
:nth-of-type(n)更易维护 -
:nth-child(1)在部分老版本 ios safari 中兼容性略差（虽已基本不用考虑） - 不要混用：比如
div:nth-child(1)和div:first-of-type表现不同，别凭感觉替换
真正复杂的情况往往不是「第一个」，而是「第一个非空内容块」「第一个带 data-role 的元素」——这时候就得结合属性选择器或 js 辅助了。