:first-child匹配不到“第一个元素”的根本原因是dom树中该元素并非父元素的第一个子节点，因换行、空格、注释等会生成#text或注释节点占据首位，导致目标元素实际索引大于0。
为什么:first-child匹配不到“第一个元素”
根本原因不是选择器写错了，而是你写的那个元素在 DOM 树里根本不是父元素的**第一个子节点**。浏览器解析 HTML 时，所有换行、缩进、空格、注释都会生成真实的 #text 或 <!-- --> 节点，它们和 <p></p>、<li> 一样算子节点——只要它排在最前，p:first-child 就永远匹配不到后面的 <p></p>。
常见干扰源包括：
-
<ul>\n <li>首页</li> </ul>→ 换行符生成#text，li是第二个子节点 -
<ul> <!-- 注释 --><li>首页</li> </ul>→ 注释节点抢占首位 -
<div> <h3>标题</h3> <p>正文</p> </div>→p:first-child不生效，因为第一个子节点是<h3></h3>
怎么确认是不是 DOM 结构问题
打开浏览器开发者工具（F12），选中父元素，在 Elements 面板里**逐个展开子节点**，看第一个图标是 <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> 还是 #text 或 <!-- -->。别信源码缩进，只信这里显示的真实节点顺序。
如果发现第一个确实是文本或注释节点，说明 :first-child 失效是必然的——它不跳过非元素节点，也不做类型过滤，只认索引 0。
:first-child 和 :first-of-type 到底该用哪个
选哪个取决于你要解决的问题：
- 想样式化「父容器里真正排第一的那个元素，且它必须是
<li>」→ 用li:first-child，但要确保结构干净（无前置节点） - 想样式化「所有
<li>中 DOM 顺序最靠前的那个，不管前面有没有<h2></h2>或空行」→ 用li:first-of-type，它自动跳过非<li>节点
li:first-of-type 在绝大多数实际场景中更可靠，尤其当 HTML 是模板生成、CMS 输出或含说明性标签时。
还有哪些容易被忽略的坑
:first-child 的匹配完全依赖静态 DOM 结构，和 CSS 层叠、display 类型、Flex/Grid 布局都无关。但它会被以下情况悄悄绕过：
- 拼写错误：
::first-child（双冒号）是伪元素写法，伪类必须用单冒号:first-child - 优先级被覆盖：即使匹配成功，也可能被更具体的规则（如
.nav li.active）或内联样式压掉 - JS 动态插入后结构变化：比如用
innerHTML替换内容，但没重置节点顺序，新插入的第一个元素未必是目标
真正难调试的从来不是语法，而是你眼里的“第一个”，和浏览器眼里 DOM 树里的“第一个”，根本不是同一个东西。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
