:only-child常不生效是因为它严格要求父元素子节点总数为1（含文本、注释等），而换行、空格、Vue注释、React Fragment等均会生成额外子节点，导致childNodes.length≠1；实际90%场景应改用更宽容的:only-of-type。
为什么 :only-child 经常不生效？
它不是看“页面上看起来只有一个”，而是严格检查 parentNode.childNodes.length === 1。只要父节点里存在一个换行、空格、<!-- comment --> 或 React.Fragment 插入的隐藏节点，:only-child 就会失效。
常见现象：写了 div > p:only-child { color: red; } 却没变色；打开 DevTools → 右键父元素 → “Edit as HTML”，能看到一堆看不见的 #text 节点。
- HTML 源码中每段换行缩进都可能生成文本节点
- Vue 的
v-if编译后会留下注释节点 - React 中
>不渲染，但会影响childNodes计数 - 服务端模板（如 Twig、Nunjucks）默认保留空白，几乎必然带文本节点
:only-child 和 :only-of-type 到底该用哪个？
语义完全不同，混用等于白写：
p:only-child：父元素下**总共只有一个子节点**，且必须是 p —— 容不得任何其他节点（哪怕 <span></span> 或换行）
立即学习“前端免费学习笔记（深入）”；
p:only-of-type：父元素下**没有别的 p**，但可以有 div、注释、换行等 —— 对真实 DOM 更宽容
- 90% 的“列表只剩一项时加圆角”“卡片只有一段文字时加大间距”这类需求，真正要的是
:only-of-type -
:only-child只适合你**完全控制 DOM 结构**的场景（比如手写紧凑 HTML：<div><p>xxx</p></div>） - 富文本编辑器输出、CMS 渲染、用户提交内容等不可控场景，
:only-of-type是更安全的选择
怎么写出真正能用的“单元素布局”？
别硬扛结构，优先从 DOM 层面确认数量：
- 后端或构建时判断：
parent.children.length === 1后加 class="single"，再写.single > * - 前端用
MutationObserver监听子节点变化，动态增删 class - 用
:has(> *:only-of-type)做容器级响应（注意：Chrome 105+、Firefox 121+ 支持，Safari 尚未全支持） - 如果必须用纯 CSS，先清理 DOM：服务端压缩 HTML、Vue 模板禁用 whitespace、React 避免在父子标签间换行
示例（安全兜底）：
/* 先用 :only-of-type 做基础适配 */
.card p:only-of-type {
margin-top: 0;
}
/* 再用 :has + :only-of-type 控制容器 */
.card:has(> p:only-of-type) {
padding: 24px;
}容易被忽略的细节
:only-child 匹配的是「当前元素是否为唯一子节点」，不是「父元素是否只含一个子元素」——这个判断只对目标元素自己做，不向上推导也不向下穿透。
它对性能影响极小，但嵌套过深（比如 article section div p:only-child）会拖慢重排；更麻烦的是，它在 SVG 或 Shadow DOM 中行为不一致，IE9+ 虽支持，但千万别在这些上下文中依赖它。
真正要验证是否生效，别靠眼睛看结构，直接在控制台运行：document.querySelector('p:only-child').parentNode.childNodes.length —— 不是 1，就别怪选择器没反应。
