:only-child仅在DOM结构完全可控时有效，即父容器内确为单一真实元素节点；React/Vue中常因文本节点、注释或Fragment导致失效，需通过JS判断children.length替代。
:only-child 能解决“列表只剩一项时视觉降级”的问题，但仅限 DOM 结构完全可控的场景
什么时候它真能用上
当你的动态列表渲染后，父容器里确实只保留一个真实元素节点（比如 <li> 或 <div>），且你希望它自动获得不同于多元素时的样式——比如取消下边框、加大内边距、居中对齐、或加粗标题。
- 消息通知区只剩一条时，
.notification:only-child可设border-radius: 8px和padding: 16px，让它像卡片一样独立呈现 - 图标按钮组渲染后只剩一个
<button>，button:only-child可设margin: 0 auto居中，避免贴左失衡 - 文章正文区若只有一段
<p>，p:only-child可调大行高和首尾间距，提升单段可读性
为什么 React/Vue 里它经常失效
根本原因不是框架 bug，而是 JSX/模板编译后插入了不可见但真实的子节点：换行符生成 #text 节点、<React.Fragment> 不渲染但不消除子节点计数、Vue 的 v-if 分支残留注释节点。
- 检查方法：在 DevTools 中右键父元素 → “Edit as HTML”，看里面是否夹着空行、
<!-- -->或纯空白 - 常见错误写法：
<ul>\n <li>唯一项</li>\n</ul>—— 那两个换行就是两个#text节点，li就不是:only-child - 修复方向：用
<React.Fragment>替代空标签、Vue 模板关闭preserveWhitespace: false、服务端压缩 HTML
:only-child vs :only-of-type — 别选错判断维度
你要响应的是「整个子节点列表长度为 1」，还是「同类型元素中只有这一个」？这是语义分水岭。
立即学习“前端免费学习笔记（深入）”；
-
img:only-child：要求父容器里除了这张图，不能有任何其他节点（包括<span>、换行、注释） -
img:only-of-type：只要父容器里没有别的<img>，哪怕旁边有<div class="overlay">或空格，它也匹配 - 动态列表中混有辅助元素（如 loading 占位符、操作按钮）时，
:only-of-type更实用；纯内容流且结构绝对干净时，:only-child语义更准
替代方案比硬扛更可靠
当 DOM 不可预测（CMS 输出、第三方组件嵌入、SSR 模板插值），别指望 :only-child 稳定工作。JS 判断 + class 是事实标准。
- React 中可在
useEffect里执行：if (parent.children.length === 1) parent.classList.add('single-child') - Vue 中
mounted钩子里做同样判断，再绑定:class="{ 'single-child': isSingle }" - CSS 写成
.container.single-child > *，彻底绕过伪类干扰
真正容易被忽略的是：浏览器计算 :only-child 时，连一个看不见的换行都算数；而人眼看到的“只有一个”，从来不是 DOM 树里的“只有一个”。
