:only-child 严格匹配父节点仅有一个子节点的元素，但因换行、空格、注释等文本节点存在而极易失效；90%场景应改用更宽容的:only-of-type。
:only-child 能用，但绝大多数情况下你不该直接用它——它对 DOM 结构太敏感，稍有不慎就失效。
为什么 :only-child 经常不生效
它不是看“页面上看起来只有一个元素”，而是严格检查 parentNode.childNodes.length === 1。只要父节点里存在一个换行、空格、<!-- comment --> 或 插入的隐藏节点，:only-child 就跳过匹配。
- HTML 源码中每段换行缩进都可能生成
#text节点 - Vue 的
v-if编译后会留下注释节点 - React 中
不渲染，但会影响childNodes计数 - 服务端模板（如 Twig）默认保留空白，几乎必然带文本节点
验证方法：选中目标元素，在控制台运行 document.querySelector('p:only-child').parentNode.childNodes.length。如果不是 1，就别怪选择器“失灵”。
什么时候真能用 :only-child
仅限你完全控制 HTML 输出、且能保证 DOM 紧凑无干扰的场景：
- 手写静态 HTML：
<div><p>xxx</p></div>—— 连换行和空格都不能有 - 构建时已压缩 HTML，且确认无 Fragment/注释残留
- 纯 JS 动态插入单个元素，且未插入任何文本节点
例如：img:only-child { display: block; margin: 0 auto; } 在图片为唯一子节点时居中，但前提是父容器里真没别的东西。
90% 场景该用 :only-of-type 而不是 :only-child
语义完全不同，混用等于白写：
-
p:only-child：父元素下总共只有一个子节点，且必须是<p></p>—— 容不得任何其他节点（哪怕<div> 或换行）<li> <code>p:only-of-type：父元素下没有别的<p></p>，但可以有<div>、注释、换行等 —— 对真实 DOM 更宽容<p>“列表只剩一项时加圆角”“卡片只有一段文字时加大间距”这类需求，真正要的是 <code>:only-of-type。它对富文本、CMS、用户生成内容等不可控场景更友好。兜底方案比硬扛更可靠
别低估文本节点的存在感——它不渲染，但会实实在在让
:only-child失效。如果你必须用:only-child，就得保证 HTML 是紧凑无换行的；否则，不如一开始就放弃它。- 兼容旧浏览器？服务端或构建阶段判断
parent.children.length === 1后加class="single"，再写.single > * - React 中可在
useEffect里执行：if (parent.children.length === 1) parent.classList.add('single-child') - Vue 中
mounted钩子里做同样判断，再绑定:class="{ 'single-child': isSingle }"
真正容易被忽略的是：DOM 层面的子节点数量 ≠ 视觉上看到的元素数量。CSS 伪类不“看”样式，只“数”节点。
- 兼容旧浏览器？服务端或构建阶段判断
