:only-child在边距控制中几乎必然失效，因其要求元素是父节点唯一子节点，而HTML空白、注释等均生成text节点导致匹配失败；推荐用:only-of-type或JS判断替代。
:only-child 不能稳定用于消除单个子元素的边距——它匹配失败的概率远高于成功，除非你完全掌控 HTML 输出且禁用所有空白节点。
为什么 :only-child 在边距控制中几乎必然失效
浏览器会把 HTML 源码里的换行、缩进、注释都解析为 #text 节点，哪怕你只写了一个 <div></div>，只要前后有回车，parentNode.childNodes.length 就不等于 1。而 :only-child 的匹配条件是：该元素必须是父节点下 唯一一个子节点（类型不限），且这个子节点就是它自己。
- React 中
<fragment></fragment>不渲染，但子节点计数仍包含其内部文本节点 - Vue 模板默认保留空白，
v-if编译后常留下注释节点 - Nunjucks/Twig 等服务端模板几乎总会插入不可见文本节点
- 检查方法：在控制台执行
el.parentNode.childNodes.length，结果不是 1 就别指望生效
真正可用的替代方案：:only-of-type
:only-of-type 只关心“同标签类型是否唯一”，对文本节点、注释、其他类型元素完全免疫，语义也更贴近实际需求：你想去掉边距的，是“唯一的按钮”，不是“父容器里连空格都不能有”。
-
button:only-of-type { margin: 0; }—— 父容器里只有这一个button，哪怕旁边有<span>loading</span>或换行，也能命中 -
.card > p:only-of-type { margin-top: 2rem; }—— 单段正文时加大顶部间距，多段时自动恢复默认 - 配合
:has()影响父级（Chrome 105+ / Firefox 121+）：.container:has(> button:only-of-type) { padding: 1rem; }
兼容旧浏览器的可靠兜底：JS 判断 + class 控制
CSS 层面硬扛 DOM 结构不确定性，只会增加调试成本。JS 判断才是可预测、可测试、无兼容陷阱的解法。
立即学习“前端免费学习笔记（深入）”；
- React
useEffect：if (parent.children.length === 1) parent.classList.add('single-child'); - Vue
mounted钩子：:class="{ 'single-child': $refs.container?.children.length === 1 }" - CSS 写成：
.container.single-child > * { margin: 0; }，干净、明确、不依赖 DOM 文本节点状态
真正容易被忽略的，是文本节点不渲染却参与 childNodes 计数这个事实——它让 :only-child 成了少数几个“写对了也不一定生效”的 CSS 特性之一。边距这类影响布局精度的操作，宁可用 JS 多一步判断，也不要赌 HTML 源码里有没有空格。
