:only-child仅在元素是父容器唯一子元素（无论类型）时生效；若父元素含空格、换行或注释等Text/Comment节点，则子节点数＞1，导致失效。
什么时候 :only-child 才真正生效
:only-child 只在元素是其父容器的**唯一子元素**（且类型任意）时匹配。它不关心元素标签名是否唯一，只看子节点数量是否为 1。
常见误判场景：父元素里有空格、换行或注释，这些在 DOM 中会生成 Text 节点，导致子元素数量 > 1，:only-child 失效。
- ✅ 正确：
<div><p>hello</p></div>→p:only-child匹配 - ❌ 失效：
<div>\n <p>hello</p>\n</div>→ 换行符生成 Text 节点，p不再是唯一子元素 - ❌ 失效：
<div> <!-- note --><p>hello</p> </div>→ 注释也是子节点
:only-child 和 :only-of-type 的关键区别
两者常被混用，但行为完全不同：
-
:only-child：父元素下**总共只有一个子节点**，不管类型 —— 要求最严 -
:only-of-type：父元素下**同类型（如p）的子元素仅有一个**，其他类型（span、div）可共存 —— 更宽松实用
例如：<article><h1>Title</h1>
<p>Text</p></article>
-
p:only-child❌ 不匹配（父有 2 个子元素） -
p:only-of-type✅ 匹配（p是唯一的p元素）
实际能用 :only-child 的典型场景
它适用面窄，但某些结构明确、无干扰节点的场景很干净：
- 动态渲染的列表项，服务端/JS 确保只输出一个子元素（如卡片容器内只放一个
figure） - 表单中单个
input直接嵌在label里：<label><input type="checkbox"></label>→input:only-child可精准定位该独占输入框 - 图标按钮组件，父
button内只含一个svg，无文字、无空格：button svg:only-child
注意：若后续可能加辅助文本或状态图标，:only-child 会立刻失效，此时应改用类名或 :only-of-type。
调试时看不到效果？先检查 DOM 结构
浏览器开发者工具里看到元素“明明就一个”，但 :only-child 不生效，大概率是 DOM 中存在不可见节点：
- 在 Elements 面板中右键父元素 → “Edit as HTML”，观察是否有换行、空格、注释残留
- 用 JS 快速验证：
console.log(parent.children.length, parent.childNodes.length)——childNodes包含 Text/Comment，children只含 Element - 若需严格控制，可在 JS 渲染后调用
parent.replaceChildren(child)（清空并重置），或服务端模板中删掉多余空白
真正可靠的唯一性控制，往往得靠代码逻辑保证子节点数量，而不是依赖 CSS 伪类去“碰运气”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
