:only-child不生效是因为它要求目标元素是父元素的唯一子节点，而换行符、空格、注释等均被算作子节点；实际开发中应优先使用语义更匹配且容错性更强的:only-of-type。
为什么:only-child经常不生效
它只在目标元素是父元素的「唯一子节点」时匹配，而浏览器把换行符、空格、注释甚至 <script> 都算作子节点。你写的 div p:only-child 没反应，大概率不是选择器错了，而是 <div>\n <p>x</p>\n</div> 里那两个换行生成了两个 #text 节点，导致 parentNode.childNodes.length 等于 3。
常见干扰源：
- 模板引擎（如 Vue 的
<!--v-if-->、React 的开发模式注释）自动插入注释节点 - 服务端渲染（SSR）输出的 HTML 自带缩进和换行
-
display: none的兄弟元素仍参与计数，:only-child不看可见性 - 富文本编辑器或 CMS 输出中混入不可见字符或零宽空格
:only-child 和 :only-of-type 到底该用哪个
语义完全不同，选错就白写样式：
-
p:only-child：要求父元素下总共只有这一个子节点，且必须是<p>—— 容不得任何其他节点，哪怕是个空格 -
p:only-of-type：只要求父元素下没有别的<p>，允许存在<div>、文本、注释等 - 90% 的真实需求其实是“同类型唯一”，比如
li:only-of-type给单项列表加圆角，而不是li:only-child - 旧版 Safari 对空白更敏感，
:only-of-type兼容性更稳
怎么快速验证是否满足 :only-child 条件
别靠肉眼数标签，用 DevTools 控制台一行命令确认：
立即学习“前端免费学习笔记（深入）”；
- 选中目标元素，在控制台执行：
document.querySelector('your-selector').parentNode.childNodes.length—— 结果必须严格等于1 - 对比
parent.children.length（只计元素节点）和parent.childNodes.length（计所有节点），若后者更大，说明有隐藏干扰 - 临时加调试样式：
* { outline: 1px solid red !important; }，看有没有框住看不见的空白区域 - 右键父元素 → “Edit as HTML”，直接观察是否有换行、空格、注释残留
结构不可控时 safer 的替代方案
纯 CSS 很难兜底，尤其在 CMS、用户生成内容或 SSR 场景：
- 优先改用
:only-of-type，它对 DOM 干净度要求低得多 - JS 判断后加 class：
if (parent.children.length === 1) parent.classList.add('has-only-child');，再写.has-only-child > * - 用
:has(> *:only-child)做容器级响应（Chrome 105+、Safari 15.4+ 支持，Firefox 尚未全量） - 服务端模板中启用 HTML 压缩（如
<div><p>x</p></div>连写），但不适合需要可读性的模板项目
真正可靠的唯一性控制，往往得靠代码逻辑保证子节点数量，而不是依赖 CSS 伪类去“碰运气”。
