:only-child 失效是因为文本节点（如换行、空格、注释）被浏览器视为真实子节点，导致父元素子节点数大于1；解决需单行html或js判断children.length===1。
文本节点会让 :only-child 失效
哪怕 DOM 看起来“只有一个子元素”，只要父容器里存在不可见的文本节点（比如换行、空格、注释），:only-child 就不会匹配。浏览器把文本节点当真实子节点计数，所以 div > p:only-child 在下面这种结构里完全不生效：
<div> <p>内容</p> </div>
原因：换行符生成了一个文本节点，<div> 实际有两个子节点——文本节点 + <code><p></p>。此时 <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><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </section>
h2:only-child ❌ 不匹配（因为还有 <p></p>）h2:only-of-type ✅ 匹配（<h2></h2> 是唯一的 h2，不关心 <p></p>）
常见错误是拼错名字，比如写成 :only-child-of-type 或 :only-of-child —— DevTools 里这条规则会直接灰掉，不报错也不生效。
嵌套结构中父级不明确导致误判
:only-child 的作用对象永远是**直接父元素**，不是祖先。很多人以为“整个列表只剩一项就触发”，其实它只看 immediate parent。
比如你写 ul li:only-child，它匹配的是「<ul></ul> 下只有一个 <li>」的情况；但如果 <ul></ul> 里还混着 <div> 或注释，照样失效。
<p>更隐蔽的问题是：某些框架（如 Vue/React）在渲染时自动插入 comment 节点做标记，这也会让 <code>: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 就是纸面逻辑，不是运行时保障。
