:first-child不生效是因为它只匹配DOM树中父元素的第一个子节点，而换行、空格、注释等会生成#text或#comment节点，使目标元素实际位于第2位或更后；应改用:first-of-type或检查并清理DOM结构。
为什么:first-child看起来是第一个却选不中
它根本不看“看起来”，只认 DOM 树里 parentNode.childNodes[0] 是不是你要的那个标签。换行、空格、<!-- 注释 --> 全都会生成真实节点（#text 或 #comment），把你的目标元素挤到第 2、第 3 位。肉眼看到的“第一行”和 DOM 里的“第一个子节点”完全是两回事。
常见错误现象：
-
ul li:first-child没加边框，检查 Elements 面板发现ul下第一个节点是灰色的#text -
article > p:first-child完全没反应——因为第一个子节点其实是<h2></h2> - Vue/React 渲染后，明明模板里写了
<ul> <!-- tip --><li>...</li> </ul>，但li:first-child就是不生效
:first-child 和 :first-of-type 到底该用哪个
选谁，取决于你真正想表达的逻辑：
- 要“结构上绝对第一个子元素”（比如清掉容器顶部默认
margin-top）→ 用:first-child，但必须确保父元素开头**没有注释、换行、空格、其他标签** - 要“第一个出现的某类元素”（比如文章里首个
<p></p>、列表中首个<li>）→ 直接用:first-of-type，它自动跳过所有非同类节点，抗干扰强，语义也更贴近日常需求
示例：<div>
<h2>标题</h2>
<p>段落1</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>
<p>段落2</p>
</div>
-
p:first-child→ 不匹配（第一个子节点是h2） -
p:first-of-type→ 匹配第一个p（段落1）
怎么确认是不是文本/注释节点导致失效
别猜，直接查 DOM：
- 打开浏览器开发者工具（F12），选中父元素，在 Elements 面板里展开子节点，逐个看第一个是不是你要的标签（注意识别灰色的
#text和#comment） - 在控制台执行：
document.querySelector('ul').childNodes，观察输出数组第一项的nodeType（3是文本，8是注释） - 临时加调试样式：
ul > * { outline: 1px solid red; }—— 注意：这个只高亮 Element 节点，#text和注释不会被 outline 到，不能替代childNodes检查
动态插入时:first-child突然失效怎么办
JS 插入会改变子节点顺序，但 :first-child 不会自动“重算”：
- 用
innerHTML +=追加内容？整个子树会被重建，所有节点索引重排，原来有效的:first-child状态丢失 - 用
appendChild()或insertAdjacentElement('beforeend', el)可保持原有顺序，但新元素不会成为:first-child - 想让新元素变成
:first-child，必须显式置顶：parent.prepend(newEl)或parent.insertAdjacentElement('afterbegin', newEl) - 但前提是插入前父元素开头没有干扰节点；否则仍需先清理或改用
:first-of-type
真正容易被忽略的是：哪怕你写对了选择器、HTML 看着也干净，只要服务端模板注入了隐藏提示 <div class="tip">，或框架渲染时悄悄加了注释节点，<code>:first-child 就会静默失效——它不报错，只是不匹配。调试时永远先看子节点列表，而不是去调样式优先级。
