:only-child 失效是因为文本节点（如换行、空格、注释）被浏览器视为真实子节点，导致父元素子节点数大于1；解决需单行HTML或JS判断children.length===1。

文本节点会让 :only-child 失效

哪怕 DOM 看起来“只有一个子元素”，只要父容器里存在不可见的文本节点（比如换行、空格、注释），:only-child 就不会匹配。浏览器把文本节点当真实子节点计数，所以 div > p:only-child 在下面这种结构里完全不生效：

<div>
  <p>内容</p>
</div>

原因：换行符生成了一个文本节点，

实际有两个子节点——文本节点 +

。此时

既不是第一个也不是最后一个“唯一”子节点。

解决办法只有两个：

• 把 HTML 写成单行：

  内容

• 用 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 ❌ 不匹配（因为还有

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

）
h2:only-of-type ✅ 匹配（

是唯一的 h2，不关心

）

常见错误是拼错名字，比如写成 :only-child-of-type 或 :only-of-child —— DevTools 里这条规则会直接灰掉，不报错也不生效。

嵌套结构中父级不明确导致误判

:only-child 的作用对象永远是**直接父元素**，不是祖先。很多人以为“整个列表只剩一项就触发”，其实它只看 immediate parent。

比如你写 ul li:only-child，它匹配的是「

下只有一个

」的情况；但如果

里还混着

或注释，照样失效。

更隐蔽的问题是：某些框架（如 Vue/React）在渲染时自动插入 comment 节点做标记，这也会让 :only-child 失效，而你在源码里根本看不到这些节点。

调试建议：

• 在 DevTools 中右键父元素 → “Edit as HTML”，手动删掉所有换行和空格再试
• 用 JS 检查：el.parentElement.childNodes.length（含文本/注释） vs el.parentElement.children.length（仅元素）

别指望它兜底，真要按数量控制样式得靠 JS

CSS 伪类本质是声明式匹配，没有运行时判断能力。:only-child 不是“如果子元素数量为 1 就生效”，而是“当浏览器静态解析 DOM 时发现它是唯一子节点才启用”。一旦结构动态变化（比如 JS 插入/删除节点），它不会重新计算。

真正可靠的做法是监听变化：

• 用 MutationObserver 监听 childList 变化
• 每次变动后检查 parent.children.length === 1，然后 toggle 类名
• 或者服务端/构建阶段就注入 class="single"，CSS 写 .single > *

最常被忽略的一点：开发者总想用 CSS 解决数量判断问题，但只要涉及文本节点、动态插入、框架注释，:only-child 就是纸面逻辑，不是运行时保障。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！