:only-child常不生效是因为它严格要求父元素的childNodes.length必须等于1，而换行、空格、注释等均生成#text节点导致计数超标；实际应优先使用容错性更强的:only-of-type，或通过JS动态加class兜底。
为什么:only-child经常不生效
它不是看“页面上看起来只有一个”，而是严格检查 parentNode.childNodes.length === 1。只要父元素里存在换行、空格、注释（比如 Vue 的 <!--v-if-->、React 开发模式插入的注释）、<script></script> 标签，甚至零宽空格，都会生成额外的 #text 节点，导致计数大于 1。
常见误判场景：
-
<div>\n <p>x</p>\n</div>中两个换行符 → 3 个子节点：#text+<p>+#text -
display: none的兄弟元素仍计入childNodes，不影响判断逻辑 - 服务端渲染（SSR）或 CMS 输出的 HTML 几乎必然带缩进和换行，
:only-child在这类场景下基本不可靠
:only-child 和 :only-of-type 必须分清
两者语义完全不同，混用等于白写样式：
-
p:only-child：要求父元素下总共只有这一个子节点，且必须是<p>—— 不允许任何其他节点，哪怕是个空格 -
p:only-of-type：只要求父元素下没有别的<p>，允许存在<div>、文本、注释等 - 90% 的真实需求（如“列表只剩一项时加圆角”）其实要的是
:only-of-type，它对 DOM 干净度要求低得多 - 旧版 Safari 对空白更敏感，
:only-of-type兼容性更稳
怎么快速验证是否满足 :only-child 条件
别靠肉眼数标签，用 DevTools 控制台一行命令确认：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 选中目标元素，在控制台执行：
document.querySelector('p:only-child').parentNode.childNodes.length—— 结果必须严格等于1 - 对比
parent.children.length（只计元素节点）和parent.childNodes.length（计所有节点），若后者更大，说明有隐藏干扰 - 右键父元素 → “Edit as HTML”，直接观察是否有换行、空格、注释残留
- 临时加调试样式：
* { outline: 1px solid red !important; }，看有没有框住看不见的空白区域
结构不可控时 safer 的替代方案
纯 CSS 很难兜底，尤其在 CMS、用户生成内容或 SSR 场景：
- 优先改用
:only-of-type，它对 HTML 更宽容，适配成本最低 - JS 判断后加 class：
if (parent.children.length === 1) parent.classList.add('has-only-child');，再写.has-only-child > * - 用
:has(> *:only-of-type)做容器级响应（Chrome 105+、Safari 15.4+ 支持，Firefox 尚未全量） - 服务端模板中启用 HTML 压缩（如
<div><p>x</p></div>连写），但不适合需要可读性的模板项目
真正可靠的唯一性控制，往往得靠代码逻辑保证子节点数量，而不是靠眼睛猜结构。
