:only-child未生效的根本原因是父容器存在文本或注释等非元素子节点。验证需用parentNode.childNodes.length，而非children.length；多数场景应优先使用:only-of-type。
为什么 :only-child 看似匹配却没生效
根本原因几乎总是：目标元素的父容器里其实不止一个子节点。哪怕你只写了 hello 不是「唯一子元素」。
常见误判场景：
- HTML 源码中 和
之间有换行或缩进 → 生成一个Text节点- 使用了 Vue/React 等框架，模板编译后插入注释节点（
- JS 动态插入了其他元素（包括
document.createTextNode('')）但没注意怎么快速验证是否真为唯一子元素
别靠肉眼数标签，直接用浏览器开发者工具的控制台验证：
立即学习“前端免费学习笔记（深入）”；
console.log(document.querySelector('your-selector').parentNode.children.length)这个值必须为
1才可能命中:only-child；但更准的是看.childNodes：console.log(document.querySelector('your-selector').parentNode.childNodes.length)如果后者 > 1，说明存在文本/注释等非元素节点干扰。
实操建议：
- 在 DevTools 的 Elements 面板中右键父元素 → «Break on» → «subtree modifications»，观察是否有意外节点插入
- 临时加一段调试 CSS：
* { outline: 1px solid red !important; }，看是否意外框住了空白区域（暗示存在不可见节点） - 用
innerHTML和innerText对比：若两者不等，大概率有隐藏文本节点
:only-child和:only-of-type到底该选谁二者语义不同，选错就白调样式：
-
:only-child要求父元素下「只有一个子节点，且该节点就是它自己」——对节点类型、数量都敏感 -
:only-of-type只要求「同类型元素中它是唯一的」，允许父元素下有其他类型节点（如、文本、注释）
例如：
one
ignored此时
p:only-of-type匹配成功，但p:only-child不匹配。多数真实场景中，你真正想要的是「当前类型唯一」，而不是「整个 DOM 树结构上唯一」，所以优先尝试
:only-of-type。兼容性与替代方案：当必须支持老浏览器时
:only-child在 IE9+ 支持，但 IE9 对动态节点变更响应有 bug；IE8 及以下完全不支持。如果项目仍需兼容旧环境：- 用 JS 补丁：
element.parentNode.children.length === 1后手动加 class - CSS 方案：改用
:first-child:last-child组合，语义等价且兼容到 IE7 - 注意：后者对伪元素（
::before/::after）无影响，但对真实子节点判断可靠
真正容易被忽略的是：CSS 选择器匹配发生在渲染前，而 JS 修改 DOM 后不会自动触发重排样式，所以用 JS 动态删减子节点后，记得强制触发一次
offsetHeight或重设className来确保样式更新。 - 使用了 Vue/React 等框架，模板编译后插入注释节点（
