:only-child要求元素是父元素唯一子节点（含文本、注释等所有节点），而:only-of-type仅要求同类型子元素唯一；前者易因空白节点失效，后者更实用稳定。
:only-child 和 :only-of-type 不是“哪个更好”，而是“哪个更贴合你的 DOM 结构和预期条件”。选错一个，样式就失效——而且很难排查，因为问题藏在看不见的空白节点里。
为什么 :only-child 常常不生效？
它数的是所有子节点，包括文本节点（换行、空格、缩进）和注释节点。哪怕你写的是：
<div class="card"> <p>只有一段文字</p> </div>
实际 DOM 中，<p> 的父元素 <div> 其实有 3 个子节点：换行符 + <p> + 换行符。所以 p:only-child 完全不匹配。
- 用浏览器开发者工具检查
element.parentNode.children.length，常会发现值是 3 或 5，而不是 1 - 服务端渲染（SSR）、模板引擎（如 Vue 的
v-html、PHP 拼接 HTML）几乎必然插入空白节点 -
:only-child在 JSX/TSX 中相对可靠，前提是没手动加换行或使用了React.Fragment包裹
:only-of-type 怎么避开空白节点干扰？
:only-of-type 只统计同标签名的兄弟元素，完全忽略文本节点、注释、<span>、<div> 等其他类型节点。它问的是：“当前这个 <p>，是不是父元素里唯一的 <p>？”
立即学习“前端免费学习笔记（深入）”；
- 以下 HTML 中，
p:only-of-type仍能命中：<div> <!-- 注释 --> \n <p>正文</p>\n <div class="meta">副信息</div> </div>
- 但
p:only-child在这里完全失效，因为父元素有至少 3 个子节点 - 如果父元素有两个
<p>，哪怕中间夹着 10 个<span>，p:only-of-type也不会匹配
什么时候必须用 :only-child？
当你真正需要“整个容器只允许存在这一个元素”，且你能 100% 控制 DOM 结构时。典型场景：
- 图标按钮组件：
button.icon-only > svg:only-child，确保按钮内不能有任何文字或其他元素 - 原子级卡片：
.card > article:only-child，表示该卡片只承载单篇内容，不允许嵌套列表或分组 - 校验逻辑兜底：配合 JS 判断
el.parentNode.children.length === 1，再决定是否启用某套布局逻辑
注意：这类需求越来越少见，多数 UI 框架已转向用 class 控制状态（如 is-single），而非依赖 DOM 结构推断。
真实项目里怎么选？
先问自己两个问题：
- 你要响应的是“这个容器有没有且仅有一个
<img>”，还是“这个容器是不是除了<img>就啥都没有”？前者用img:only-of-type，后者才考虑img:only-child - 你的 HTML 是手写的、JS 动态生成的，还是后端/模板引擎输出的？只要不是纯前端可控 JSX，一律默认存在空白节点 → 优先
:only-of-type
真正容易被忽略的点：CSS 选择器本身没有调试能力。你得靠 console.dir(el.parentNode.children) 看清真实子节点构成，而不是凭 HTML 源码“感觉”它应该只有一个子元素。
