:only-child 仅在父元素有且仅有一个子节点且为当前元素时生效；它不区分节点类型，空格、注释、隐藏元素等均会导致失效，无法响应动态状态变化。
什么时候 :only-child 能真正生效
:only-child 匹配的是「父元素下有且仅有一个子元素，且该子元素是当前元素」。它不看元素类型，只看数量和层级关系。所以如果你写 button.delete:only-child { display: none; }，只有当这个按钮是它父容器的唯一子节点时才会隐藏——哪怕父元素里还有一行空格、一个注释、或一个隐藏的 <span></span>，它就不是 :only-child 了。
常见误用场景：
– 父元素是 <div class="actions"><button class="delete">删</button></div> ✅ 可能生效
– 父元素是 <div class="actions">
<button class="delete">删</button><span style="display:none"></span>
</div> ❌ 失效（两个子节点）
– 父元素含换行或空格文本节点：HTML 中的换行缩进也会被解析为 Text 节点，导致子元素数量 > 1
为什么不能直接靠 :only-child 控制“是否只剩一个可删项”
这是最常踩的逻辑坑：:only-child 判断的是 DOM 结构，不是业务状态。比如你有一组列表项，每项带一个删除按钮；你想“当只剩最后一项时，隐藏它的删除按钮”，但 :only-child 会作用在每个按钮上——只要某个 <li> 里只有这一个按钮，它就被隐藏，和“全局只剩一项”完全无关。
换句话说：
– 它无法感知兄弟元素是否被移除或隐藏
– 它不响应 JavaScript 动态增删，除非你同步操作 DOM 结构本身（比如真的 removeChild）
– 它对 display: none 或 visibility: hidden 的兄弟元素依然计数
所以纯 CSS 方案在这里本质失效。你需要把“是否唯一”这个状态显式暴露出来，比如：
- 用 JS 在父容器上添加
data-last-item="true"类 - 让删除按钮的父级（如
<li>）在只剩一项时加上class="last" - 然后写
.last .delete { display: none; }—— 这才是可控的
替代方案：用 :only-of-type 或 JS 驱动类名更可靠
如果结构允许（比如所有删除按钮都是同级 <button></button>，且没有其他 <button></button> 干扰），可以试试 button.delete:only-of-type。它比 :only-child 宽松一点：只要同级中没有其他 <button></button>，就算有 <span></span> 或文本节点，它也匹配。
但更推荐 JS 配合 class 控制：
if (document.querySelectorAll('.item').length === 1) {
document.querySelector('.item .delete').classList.add('hidden');
} else {
document.querySelector('.item .delete').classList.remove('hidden');
}
或者用 MutationObserver 监听子节点变化，自动更新 data-has-only-one 属性，再用属性选择器控制样式：
[data-has-only-one="true"] .delete { display: none; }
容易忽略的渲染边界：伪元素和 SVG 也会干扰
即使你肉眼看不到额外内容，这些也会计入子节点数：
– ::before / ::after 生成的内容不影响 :only-child（它们不是 DOM 子节点）
– 但内联 SVG 中的 <title></title>、<desc></desc>、甚至换行符，都会让 <svg></svg> 的子节点数 > 1
– React/Vue 渲染时插入的 comment 节点（如条件渲染的 <!-- react-text: 123 -->）同样破坏 :only-child
调试建议：
– 在 DevTools 中右键父元素 → “Edit as HTML”，看实际子节点构成
– 用 element.children.length 和 element.childNodes.length 对比，后者包含文本/注释节点
真要用纯 CSS 实现类似效果，优先考虑结构约束 + :first-child:last-child 组合，它比 :only-child 更明确，也更容易预测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
