:first-child选不到目标元素是因为它只匹配父元素第一个子节点且类型必须完全一致；若前面有注释、空格文本节点或其它标签，则失效；应改用:first-of-type或添加class控制。
为什么 :first-child 有时选不到你想要的第一个子元素
因为 :first-child 只匹配**父元素下第一个子节点且类型完全一致**的元素。比如 div > p:first-child 不会匹配到 <div>
<h2>标题</h2>
<p>段落</p>
</div> 中的 p，因为它前面有个 h2，不是第一个子元素。
常见错误现象：ul li:first-child 在列表前有注释、空格文本节点或 <!-- comment --> 时失效——因为这些也是子节点，li 就不再是第一个了。
- 它不看元素是否“视觉上第一个”，只看 DOM 树中的位置和标签名
- 文本节点、注释节点、
<script></script>都算子节点，会影响匹配结果 - 即使你写了
div > *:first-child，也只匹配第一个子节点（可能是span、img等任意标签），不是所有子元素类型的“第一个”
用 :first-of-type 替代更稳妥的场景
当你要选“第一个出现的某类元素”，而不是“第一个子元素且恰好是某类”，优先用 :first-of-type。它忽略中间夹杂的其他标签，只按类型计数。
比如：article > p:first-of-type 能选中 <article><h2>标题</h2>
<p>首段</p>
<p>第二段</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></article> 中的 p，而 :first-child 不能。
-
:first-of-type对多类型混排的容器更友好（如文章正文、卡片布局） - 它不解决“第一个子节点是文本”的问题，但能绕过其他无关标签干扰
- 注意：IE9+ 支持
:first-of-type，老项目需确认兼容性底线
真正要选“结构上第一个子元素”时的实操要点
如果你明确需要第一个子节点（无论类型），且必须用 :first-child，就得控制 HTML 结构干净：
- 确保父元素内**开头没有空格、换行、注释或
<script></script>标签**——服务端渲染或模板引擎容易悄悄插入 - 避免用 JS 动态插入前置内容后还依赖
:first-child，DOM 变了规则就失效 - 调试时用浏览器开发者工具的“Elements”面板右键检查“Show DOM Tree”，确认目标元素确实是
#parent的childNodes[0] - 必要时加个 class 如
first-slot显式标记，比纯 CSS 选择器更可控
:first-child 和 :nth-child(1) 有区别吗
没有行为区别——:nth-child(1) 就是 :first-child 的等价写法，解析和匹配逻辑完全一致。但写 :first-child 更语义清晰、字符少、可读性强。
不过要注意：:nth-child(n) 系列支持更复杂的表达式（如 :nth-child(2n+1)），而 :first-child 是独立伪类，不能参与组合计算。
- 不要写
:first-child(1)或:nth-child(1n)，冗余且易误解 - 在预处理器（如 Sass）里用变量控制序号时，才考虑
:nth-child($i)，否则坚持用:first-child - 性能上无差异，现代浏览器对两者优化程度相同
实际项目里最容易被忽略的是 HTML 源码中看不见的节点。哪怕只是模板里多了一个换行，:first-child 就可能突然不生效——这时候别急着改 CSS，先看 DOM 树。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
