:only-child 失效是因为文本节点（如换行、空格、注释）被浏览器视为真实子节点，导致父元素子节点数大于1；解决需单行HTML或JS判断children.length===1。
文本节点会让 :only-child 失效
哪怕 DOM 看起来“只有一个子元素”，只要父容器里存在不可见的文本节点（比如换行、空格、注释），:only-child 就不会匹配。浏览器把文本节点当真实子节点计数，所以 div > p:only-child 在下面这种结构里完全不生效：
<div> <p>内容</p> </div>
原因：换行符生成了一个文本节点，<div> 实际有两个子节点——文本节点 + <p>。此时 <p> 既不是第一个也不是最后一个“唯一”子节点。
解决办法只有两个：
- 把 HTML 写成单行：
<div><p>内容</p></div> - 用 JS 或后端逻辑判断
parent.children.length === 1，然后加 class 手动控制样式
:only-child 和 :only-of-type 容易混淆
这两个伪类语义完全不同：:only-child 要求父元素**只有一个子节点且就是它自己**；:only-of-type 只要求父元素中**同类型元素仅有一个**，不管其他类型节点是否存在。
立即学习“前端免费学习笔记（深入）”；
例如这个结构：
<section> <h2>标题</h2> <p>段落</p> </section>
h2:only-child ❌ 不匹配（因为还有 <p>）h2:only-of-type ✅ 匹配（<h2> 是唯一的 h2，不关心 <p>）
常见错误是拼错名字，比如写成 :only-child-of-type 或 :only-of-child —— DevTools 里这条规则会直接灰掉，不报错也不生效。
嵌套结构中父级不明确导致误判
:only-child 的作用对象永远是**直接父元素**，不是祖先。很多人以为“整个列表只剩一项就触发”，其实它只看 immediate parent。
比如你写 ul li:only-child，它匹配的是「<ul> 下只有一个 <li>」的情况；但如果 <ul> 里还混着 <div> 或注释，照样失效。
更隐蔽的问题是：某些框架（如 Vue/React）在渲染时自动插入 comment 节点做标记，这也会让 :only-child 失效，而你在源码里根本看不到这些节点。
调试建议：
- 在 DevTools 中右键父元素 → “Edit as HTML”，手动删掉所有换行和空格再试
- 用 JS 检查：
el.parentElement.childNodes.length（含文本/注释） vsel.parentElement.children.length（仅元素）
别指望它兜底，真要按数量控制样式得靠 JS
CSS 伪类本质是声明式匹配，没有运行时判断能力。:only-child 不是“如果子元素数量为 1 就生效”，而是“当浏览器静态解析 DOM 时发现它是唯一子节点才启用”。一旦结构动态变化（比如 JS 插入/删除节点），它不会重新计算。
真正可靠的做法是监听变化：
- 用
MutationObserver监听childList变化 - 每次变动后检查
parent.children.length === 1，然后 toggle 类名 - 或者服务端/构建阶段就注入
class="single"，CSS 写.single > *
最常被忽略的一点：开发者总想用 CSS 解决数量判断问题，但只要涉及文本节点、动态插入、框架注释，:only-child 就是纸面逻辑，不是运行时保障。
