正确写法是使用 :only-child，但它只匹配父容器下唯一子节点，不区分类型；若存在空白文本节点或其它兄弟元素则失效，实际应用中常需改用 :only-of-type 或 JavaScript 判断。
匹配父容器下唯一子节点的正确写法
用 :only-child 就行，但它只看「是否唯一子元素」，不关心类型或内容。很多人误以为它能选中“只有一个子 div 的父容器”，其实不是——它作用在子元素上，不是父元素。
比如 <div><p>hello</p></div> 中，<p></p> 是 :only-child；但换成 <div>
<p>hello</p>
<span></span>
</div>，<p></p> 就不再匹配。
立即学习“前端免费学习笔记（深入）”；
:only-child 和 :only-of-type 的关键区别
:only-child 要求该元素是父容器的**唯一子节点**（不管标签名）；:only-of-type 只要求它是同类型中的唯一一个（允许其他类型兄弟存在）。
- 当父容器只有
<img alt="CSS如何匹配属于父容器的唯一子节点_使用:only-child应用孤立态样式" >一个子节点 →img:only-child✅，img:only-of-type✅ - 当父容器有
<img alt="CSS如何匹配属于父容器的唯一子节点_使用:only-child应用孤立态样式" >+<span></span>→img:only-child❌，img:only-of-type✅ - 当父容器有
<img alt="CSS如何匹配属于父容器的唯一子节点_使用:only-child应用孤立态样式" >+<img alt="CSS如何匹配属于父容器的唯一子节点_使用:only-child应用孤立态样式" >→ 两者都 ❌
常见误用：想给「仅含一张图的卡片」加边框，写了 .card img:only-child，结果卡片里加了个隐藏 <span class="sr-only"></span> 就失效了——因为 DOM 树里它真不是唯一子节点。
实际项目中容易被忽略的空白文本节点
HTML 中换行、缩进产生的空格和换行，在 DOM 中会生成 Text 节点。这意味着：
<div> <p>content</p> </div>
这段代码里，<p></p> **不是** :only-child，因为前后有两个空白 Text 节点。浏览器真实子节点数是 3。
- 解决方法一：删掉换行和缩进，写成
<div><p>content</p></div> - 解决方法二：改用
:only-of-type（如果语义允许） - 解决方法三：用 JS 判断
parent.children.length === 1，再加 class 控制样式（更可靠）
替代方案：当 :only-child 不够用时怎么处理
真正需要“父容器仅有一个指定子元素”逻辑时，CSS 本身能力有限。:only-child 太脆弱，:has() 看似合适但兼容性差（Chrome 105+、Firefox 121+，Safari 还没全支持）。
- 简单场景：用
:has(> p:only-of-type)检查是否只有且仅有一个<p></p>（需确认目标浏览器支持:has） - 兼容性要求高：服务端或构建时注入 class，如
data-child-count="1" - 动态内容：用
MutationObserver监听子节点变化，手动 toggle class
最常被低估的是 DOM 文本节点的存在感——它不渲染，但会实实在在破坏 :only-child 的判断逻辑。
