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