<p>:first-child常失效是因为它严格匹配父元素第一个子节点且标签名必须一致；换行、注释或前置元素会生成#text或<!-- -->节点，使目标元素失去首位位置。</p>
为什么 :first-child 总是“选不到”第一个元素
它根本不是在找“第一个 li”或“第一个 p”，而是在找「父元素子节点列表中索引为 0 的那个节点，且该节点标签名必须完全匹配」。只要前面有哪怕一个换行、空格、HTML 注释 <!-- --> 或其他标签（比如 <header></header>），:first-child 就立刻失效。
- 浏览器把换行缩进解析为
#text节点，它算子节点——<ul>\n<li>首页</li> </ul>中的li实际是第二个子节点 -
<ul> <!-- intro --><li>首页</li> </ul>：注释节点抢占首位，li:first-child完全不匹配 -
<div> <h2>标题</h2> <p>正文</p> </div>：即使p是你想要的“第一个段落”，p:first-child也无效，因为第一个子节点是h2
:first-child 和 :first-of-type 到底该用哪个
如果你要样式化「某个类型中出现的第一个」，比如列表里第一个 li、文章里第一个 p，直接用 :first-of-type 更可靠。它自动跳过非目标标签和文本/注释节点，只在同类型兄弟中排序。
-
li:first-of-type在<ul> <div class="hint"></div> <li>首项</li> <li>次项</li> </ul>中仍能命中首项 -
p:first-of-type在<section><svg>...</svg><h2>说明</h2> <p>第一段</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" 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 href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a> <p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></section>中生效，p:first-child失效 - IE8 不支持
:first-of-type；如需兼容，得用 JS 动态加 class，而不是硬扛伪类 - 二者效果一致的唯一情况：
<ul> <li>A</li> <li>B</li> </ul>这种干净结构——但现实中几乎不存在
怎么快速验证是不是结构问题
别看 HTML 源码缩进，打开浏览器开发者工具（F12），展开父元素，**逐个查看子节点图标**：是 <p>、#text 还是 <!-- -->？这才是真实 DOM 结构。
- 如果第一个子节点是
#text或<!-- -->，:first-child必然失效 - 删掉开头的换行、空格、注释，是最直接的修复方式（但不总可行，尤其模板渲染场景）
- 动态插入时注意：
parent.innerHTML += '...'会重建整个子树，所有节点索引重算，:first-child匹配关系丢失；改用parent.appendChild()或insertAdjacentElement()
什么时候还非得用 :first-child
只有当你明确需要「这个元素既是父容器第一个子节点，又恰好是某标签」这种双重约束时才用。例如卡片组要求首项顶边框+圆角，且你确定它 100% 是父容器首个子元素——否则容易被后续插入的分隔符、提示栏等意外破坏。
- 搭配子选择器更安全：
ul > li:first-child比ul li:first-child更精准，避免嵌套列表误匹配 - 首尾同时控制时，不要写
li:first-child:last-child来“判断唯一”，它只在真正只有一个li时生效，语义和用途完全不同 - 圆角+边框组合使用时，
:first-child元素必须显式设置对应方向的边框（如border-top），否则圆角处会漏白
真实 DOM 结构永远比你写的 HTML 源码更复杂，伪类选择器只认解析后的节点序列，不读你心里想的“第一个”。
