:only-child常失效，因它要求父节点子节点总数为1，而换行、注释、空格等均生成#text节点；实际多用:only-of-type更稳妥，或通过js/服务端加class兜底。
:only-child 能用，但绝大多数情况下你真不该直接用它——因为 DOM 里藏了看不见的文本节点，它就失效。
为什么 :only-child 经常不生效
它不是看“页面上看起来只有一个”，而是数 parentNode.childNodes.length。只要结果不是 1，样式就不会应用。
- HTML 换行、缩进、空格 → 生成
#text节点 - Vue/React 模板注入的
<!--v-if-->→ 算一个子节点 -
display: none的兄弟元素 → 同样参与计数 - 服务端渲染（SSR）或 CMS 输出的 HTML → 几乎必然含空白节点
验证方法：选中目标元素，在控制台运行 document.querySelector('p:only-child').parentNode.childNodes.length。如果不是 1，就别怪选择器“失灵”。
:only-child 和 :only-of-type 到底该选哪个
语义完全不同，混用等于白写：
-
p:only-child：父元素下总共只有这一个子节点，且必须是<p></p>—— 容不得任何其他节点 -
p:only-of-type：父元素下没有别的<p></p>，但可以有<div>、<code><span></span>、注释、换行等真实项目中，90% 的“单例适配”需求（比如「列表只剩一项时加圆角」）其实要的是
:only-of-type。它对 HTML 更宽容，尤其适合富文本、CMS、用户生成内容等不可控场景。安全替代方案：不靠 CSS 硬扛结构
当结构无法保证干净时，CSS 伪类就不是第一选择：
- 后端或构建阶段判断：
parent.children.length === 1后加class="single"，再写.single > * - 前端 JS 监听：
MutationObserver检测子节点变化，动态增删 class - 用
:has(> *:only-of-type)做容器级响应（注意：Chrome 105+、Firefox 121+ 支持，Safari 尚未全支持）
别低估文本节点的存在感——它不渲染，但会实实在在让
:only-child失效。真正要兜底，得从 DOM 层面确认数量，而不是靠眼睛猜结构。 - 后端或构建阶段判断：
