应仅在父元素下严格只有一个子节点（不含任何文本、注释、其他标签）时使用:only-child；多数场景实际需:only-of-type，因其仅要求同类型唯一，容错性强。
什么时候该用 :only-child 而不是其他选择器
它只在你真正需要「父元素下除了这个元素，不能有任何其他子节点（包括文本、注释、div、span 等）」时才适用。典型场景极少，但存在：
– 动态渲染的卡片容器，服务端保证只输出一个 article，且 HTML 模板无换行
– 静态文档中手动精简过的结构，比如 <section><h1>标题</h1></section>
– 表单校验提示层，由 JS 完全控制 DOM，确保插入时父容器为空
:only-child 为什么经常“看起来写了却没生效”
不是选择器坏了，而是浏览器数出来的子节点根本不是 1：
- HTML 中换行或缩进会生成
#text节点，<div>\n <p>内容</p>\n</div>实际有 3 个childNodes -
<!-- 注释 -->是真实子节点，参与计数 -
display: none的兄弟元素仍计入children.length - Vue/React SSR 或 CMS 输出几乎必然带空白节点
验证方式：选中目标元素，在控制台运行 document.querySelector('p:only-child').parentNode.childNodes.length —— 不是 1 就不可能命中。
:only-of-type 才是多数人真正想要的
90% 标题里说的「单子元素布局」，实际要的是「同类型中唯一」，而不是「整个父容器只容得下它一个」：
-
li:only-of-type在<ul> <li>项</li> <p>说明</p> </ul>中依然生效 -
p:only-of-type可安全用于富文本编辑器输出，无视用户插入的空格或换行 - 配合
:has(> *:only-of-type)做容器级响应（Chrome 105+、Firefox 121+ 支持，Safari 当前不支持）
结构不可控时，别硬扛 CSS 伪类
当 HTML 来源不可信（CMS、用户输入、第三方组件），CSS 层面的判断就不可靠：
- 后端或构建时判断
parent.children.length === 1，加class="single"再写.single > * - 前端用
MutationObserver监听子节点变化，动态增删 class - JSX/TSX 中避免换行干扰，但手动空格仍可能破坏
:only-child
文本节点不渲染，但会实实在在让 :only-child 失效。眼睛看到的“只有一个”，和浏览器数出来的“只有一个”，常常不是一回事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
