:only-child仅在目标元素是父容器唯一子节点（含文本、注释等所有节点）时生效；常见失效因换行符、空格或script标签产生额外文本节点，而开发者误以为只计标签元素。
为什么 :only-child 有时不生效
它只在目标元素是父容器的「唯一子元素」时才匹配，哪怕父元素里多一个空格文本节点、注释，或者隐藏的 <script></script> 标签，:only-child 就直接失效。浏览器把所有节点（包括文本节点）都算进“子元素”计数，而很多人以为它只看标签元素。
- 常见错误现象：
div p:only-child想选中唯一<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婚礼策划服务机构宣传网站模板" ></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>，但父<div> 里其实还有换行符生成的文本节点 → 不匹配 <li>使用场景：适合结构绝对干净的组件封装，比如图标按钮内仅有一个 <code><svg></svg>，且 HTML 是压缩过的 - 兼容性没问题，IE9+ 都支持，但别指望它在 SSR 或模板引擎渲染后仍可靠 —— 很多模板会注入空白或注释
- 参数差异：没有参数，纯伪类；区别全在语义逻辑上
- 性能影响几乎为零，两者都是 CSS 引擎原生支持的简单选择器
- 容易踩的坑：用
:only-child做“单个按钮样式”时，如果按钮外层加了<span></span>包裹或用了v-if/*ngIf，很可能意外破坏唯一性 - JS 实操建议：
if (parent.children.length === 1) { parent.classList.add('has-only-child'); }然后写.has-only-child > * - CSS 替代写法：
:first-child:last-child效果等价于:only-child，但可读性略差；注意它依然受文本节点影响 - Vue/React 场景下，优先在组件层控制渲染逻辑，比如用
v-show而非v-if保持 DOM 节点存在，避免反复触发选择器重计算 - 执行
document.querySelector('your-selector').parentElement.childNodes，看长度是否为 1，以及第一个节点是不是你想要的元素节点（nodeType === 1） - 如果发现是
Text节点，说明有空白；可以用parentElement.children对比，它只返回元素节点 - 容易被忽略的地方：服务端渲染（SSR）后的 HTML 经常带缩进和换行，客户端 hydration 后结构没变，但
:only-child已经失效了
:only-child 和 :only-of-type 到底差在哪
前者数的是「所有子节点」，后者只数「同类型标签」。比如父元素有 <p></p>、<span></span>、<div> 各一个：<code>p:only-child 不成立（因为总共有 3 个子节点），但 p:only-of-type 成立（因为 <p></p> 是唯一的 p 标签）。
替代方案：当结构不可控时怎么安全选中“唯一子元素”
真要依赖“只有一个子元素”这个逻辑，又没法保证 DOM 干净，就得放弃纯 CSS 方案，改用 JS 判断后加 class，或者用更鲁棒的 CSS 逻辑兜底。
调试时怎么看是不是真“唯一子元素”
别靠肉眼数 HTML 源码 —— 浏览器开发者工具里看到的“Elements”面板默认会折叠文本节点，容易误判。得用 JS 控制台验证。
立即学习“前端免费学习笔记（深入）”；
