:only-child 在实际项目中应避免直接使用，因其要求父节点仅含一个子节点，而换行、空格、注释及 Fragment 等均会生成真实但不可见的节点，导致匹配失败；应优先使用 :only-of-type 解决“同类型唯一”需求。
:only-child 在绝大多数实际项目中不该直接用——它要求父节点 childNodes.length === 1，而换行、空格、注释、<React.Fragment> 都会生成不可见但真实的文本或注释节点，导致匹配失败。
为什么写了 p:only-child 却没生效
不是浏览器 bug，是 DOM 结构不满足条件：
- HTML 源码里每段缩进和换行都会生成
#text节点 - Vue 模板默认保留空白，
v-if编译后插入<!-- --> - React 中
<></>不渲染内容，但会保留在childNodes中 - 服务端模板（如 Twig）输出的 HTML 几乎必然含空格或换行
验证方法：选中父元素，在控制台执行 document.querySelector('.target').parentNode.childNodes.length。结果不是 1，就说明 :only-child 必然不触发。
真正该用 :only-of-type 的场景
90% 的“单列表项加圆角”“单段文字加大间距”需求，语义上要的是“同类型唯一”，不是“整体唯一”：
立即学习“前端免费学习笔记（深入）”；
-
li:only-of-type：父元素下只有这一个<li>，哪怕还有<div class="loading">或换行符，也能命中 -
p:only-of-type：适合 CMS 输出或用户富文本，<p>前后有<hr>或空行也不影响 -
img:only-of-type：单图卡片场景更可靠，不用强求父容器“除了这张图啥都不能有”
示例：.list li:only-of-type { border-radius: 6px; padding: 12px 16px; }
需要兼容旧浏览器时怎么兜底
:has()（如 .list:has(> li:only-of-type)）在 Safari 尚未全支持，不能作为唯一方案：
- 服务端或构建阶段判断
parent.children.length === 1，输出class="single" - React 中用
useEffect检查ref.current?.children.length === 1，动态加类 - Vue 中在
mounted钩子中做同样判断，绑定:class="{ 'single': isSingle }" - CSS 写成
.container.single > *，彻底绕过伪类干扰
DOM 层面的数量确认比 CSS 伪类更可控——文本节点看不见，但它们真实存在，且会实实在在让 :only-child 失效。
