:first-child失效的根本原因是dom树中首个子节点常为文本或注释节点（如换行、空格、），而非目标标签；需用开发者工具检查真实子节点顺序，改用:first-of-type可跳过干扰、精准匹配同类元素首个实例。
为什么:first-child总“看不见”第一个元素
根本不是选择器写错了，而是 DOM 树里第一个子节点根本不是你写的那个标签。浏览器把 HTML 里的换行、缩进、注释甚至空格都解析成真实节点——#text 或 <!-- -->，它们会抢占“第一个”的位置，导致你的 p:first-child、li:first-child 全部失效。
验证方法很简单：打开开发者工具，展开父元素，逐个看子节点图标。如果第一个是 #text（内容可能是 \n 或空格）或 <!-- -->，那就对了——问题就在这儿。
ul > li:first-child 和 ul li:first-child 区别在哪
前者只匹配 ul 的**直接子级 li**，后者会穿透嵌套，连内层 ul 里的 li 也一起抓。在 CMS 输出或用户可编辑内容中，ul > li:first-child 更安全，避免误样式化嵌套列表的首项。
-
ul li:first-child→ 可能命中<ul><li>外层第一项<ul><li>内层第一项</li></ul> </li></ul>中的两个li -
ul > li:first-child→ 只命中外层那个li，内层的完全无视 - 动态插入时，若 JS 往
ul开头插入一个<div class="hint"></div>，两者都会立刻失效
:first-child 和 :first-of-type 到底该用谁
选哪个不取决于“哪个更高级”，而取决于你要解决什么问题：
- 要样式化「整个父容器里排第一的那个元素，且它必须是
li」→ 用li:first-child，但得确保结构干净（无前置节点） - 要样式化「所有
li中第一个出现的，不管前面有没有h3、div或注释」→ 用li:first-of-type，这才是日常语义 -
p:first-of-type在<div> <h2>标题</h2> <p>段落1</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> <p>段落2</p> </div>中能精准命中第一个p；p:first-child则完全不匹配
inline 元素上:first-child 看似无效？其实是被空白骗了
给 <span></span> 或 <a></a> 加 :first-child 没反应，大概率不是选择器问题，而是父容器开头有换行或空格，生成了 #text 节点。它和 display 类型无关，纯属 DOM 结构干扰。
最稳妥的解法不是硬调选择器，而是换思路：
- 用
:first-of-type替代（推荐，简单直接） - 把 inline 元素包进一个
<div>，再对这个 <code>div应用逻辑（可控、语义清） - 删 HTML 中父标签和首个子元素之间的所有换行与空格（可读性差，不建议）
真正容易被忽略的是：CSS 伪类无法穿透 Shadow DOM，如果你在 Web Component 里调试，得确认样式作用域是否覆盖到影子树内部。
