:only-child在单元素自适应布局中几乎不可靠，因其依赖parentNode.childNodes.length===1，而换行、空格、注释、框架注入节点等均会破坏该条件；应优先使用兼容性良好的:only-of-type或JS/构建时逻辑兜底。
:only-child 在单元素自适应布局中几乎不可靠——它要求父节点 childNodes.length === 1，而真实 HTML 中的换行、空格、注释、框架注入节点（如 Vue 的 <!--v-if-->、React 的 Fragment）都会破坏这个条件。你看到“只有一个元素”，但 DOM 里早就不止一个节点了。
为什么 :only-child 在响应式场景下大概率失效
它不看渲染结果，只数 parentNode.childNodes，哪怕只是写了一行换行符：
-
<div class="card">\n <p>仅此一条</p>\n</div>→ 换行生成两个#text节点，p:only-child不匹配 - Vue 模板里
<p v-if="show">...</p>编译后留下注释节点，计入子节点总数 - 服务端模板（Twig/Nunjucks）默认保留空白，CMS 输出的 HTML 几乎必然含不可控文本节点
-
display: none的兄弟元素仍参与计数，:only-child不认“是否可见”
真正该用的是 :only-of-type
它只关心同类型元素数量，对结构宽容得多，90% 的“单条数据适配”场景都该换它：
-
ul li:only-of-type→ 列表只剩一项时加圆角/居中，不管有没有<div>或注释 -
.notification:only-of-type→ 单条提示消息时加边框、提升 z-index，不怕富文本混入其他标签 -
article > p:only-of-type→ 文章正文仅一段时放大字号、增加行高，忽略<img>或<figure> - 注意：它不兼容 IE，但 Chrome 105+、Firefox 121+、Safari 16.4+ 均已支持
当结构完全不可控时，别硬扛 CSS
伪类不是万能胶，DOM 层面不干净，样式就注定失效。更稳妥的做法是把判断逻辑交给 JS 或构建阶段：
立即学习“前端免费学习笔记（深入）”；
- 服务端或构建时判断
parent.children.length === 1，加 classsingle-child，再写.single-child > * - 前端用
MutationObserver监听子节点变化，动态增删is-single类 - 用
:has(> *:only-of-type)做容器级响应（如.list:has(> li:only-of-type)），但注意 Safari 当前仍不支持:has嵌套伪类
别指望眼睛看结构“干净”就安全——打开控制台跑一句 document.querySelector('p:only-child').parentNode.childNodes.length，十次有九次不是 1。真要兜底，得从 DOM 数量确认开始，而不是在 CSS 里反复试错。
