:first-child 失效是因为它只匹配父元素的第一个子节点，不区分类型；若前面有注释、文本节点或其它标签，则不匹配。应改用 :first-of-type 或添加 class 控制。
为什么 :first-child 有时不生效
它只认“是不是父元素的第一个子节点”，不看类型。比如 <div>
<p>A</p>
<span>B</span>
</div> 中，<p></p> 是第一个子元素，p:first-child 能命中；但若前面加个 <!-- 注释 --> 或 <div>
<em>X</em><p>A</p>
</div>，<p></p> 就不是第一个子节点了，:first-child 直接失效。
常见错误现象：li:first-child 没加粗、button:first-child 没变色——大概率是 DOM 结构里它前面有别的元素（空格换行在某些解析模式下也算文本节点）。
- 检查浏览器开发者工具的 Elements 面板，确认目标元素是否真为父容器的 第一个子节点
- 如果父容器开头有注释、文本节点或其它标签，
:first-child就不可靠 - 想按“同类型中的第一个”匹配，得换
:first-of-type
:first-of-type 和 :first-child 的关键区别
:first-of-type 看的是“同名标签中排第一的那个”，不管中间隔了什么。比如 <div>
<em>1</em><p>2</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<span>3</span><p>4</p>
</div>，p:first-of-type 会选中 <p>2</p>，而 p:first-child 根本不匹配（因为 <p></p> 不是第一个子节点）。
-
:first-child→ “我是老大（位置第一）” -
:first-of-type→ “我是同类里最早出生的那个（类型内序号第一）” - 性能上没差别，但语义完全不同；误用会导致样式完全不出现
- IE9+ 支持
:first-of-type，如果要兼容 IE8 及更早，只能靠 JS 或加 class
真正“同级中第一个某类元素”的稳妥写法
如果目标是“在一组兄弟元素中，选第一个 button”，且不确定 DOM 是否干净，最稳的方式是：明确加 class 控制，而不是赌伪类。
比如：<div>
<span>hint</span><button class="first-action">Submit</button><button>Cancel</button>
</div>，然后写 .first-action 样式。
- 伪类依赖结构，class 依赖意图——后者更可控
- 构建时加 class 成本极低，维护时不会因模板微调就崩样式
- 如果必须用 CSS 选择器，且确定只有
button一种可交互元素，可用button:not(:nth-of-type(2))这种绕路写法，但可读性差，不推荐
Flex/Grid 容器里 :first-child 还管用吗
管用，但容易被误解。Flex 或 Grid 不改变 DOM 树结构，只改变渲染顺序。:first-child 仍按 HTML 顺序判断，和视觉顺序无关。
比如：<div style="display: flex; flex-direction: row-reverse">
<div>A</div>
<div>B</div>
</div>，视觉上 B 在左、A 在右，但 A 还是第一个子元素，div:first-child 依然匹配 A。
- 想按视觉顺序选“最左边那个”，不能靠
:first-child，得结合order属性或改 HTML 顺序 - Grid 中若用
grid-template-areas重排，同样不影响:first-child的匹配逻辑 - 这点最容易在响应式切换 display 类型时翻车
CSS 选择器不操作 DOM，只观察结构。所谓“同级第一个”，本质是你对“同级”和“第一个”的定义是否和浏览器解析结果一致——多数时候问题不出在写法，而出在没打开开发者工具看一眼真实节点顺序。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
