:only-child常因隐藏文本节点失效，需检查childNodes.length是否为1；实际项目应优先用:only-of-type，它忽略文本/注释节点，仅按标签名匹配；结构不可控时宜用JS动态加class兜底。
:only-child 在单子元素布局中确实能触发特殊对齐，但**绝大多数情况下它根本不会生效——不是你写错了，而是 DOM 里混进了你看不见的文本节点**。
为什么 :only-child 常常对齐失败
它不看“页面上只显示一个元素”，而是严格检查 parentNode.childNodes.length === 1。只要父容器里存在以下任一情况，对齐规则就失效：
- HTML 换行或缩进产生的空白文本节点（比如
<div>\n <p>内容</p>\n</div>实际生成 3 个子节点） - 注释节点
<!-- sidebar --> - 服务端模板（如 PHP、Vue SSR）自动插入的空格或换行
-
display: none的兄弟元素仍参与计数
验证方法：选中父元素，在控制台运行 document.querySelector('.target').parentNode.childNodes.length。如果不是 1，:only-child 就不可能命中。
:only-of-type 才是真实项目里的对齐主力
当你真正想表达“只有一个 p 就居中”“只剩一个卡片就撑满宽度”，该用 :only-of-type —— 它只统计同标签名兄弟，完全忽略文本、注释、div 等干扰项。
立即学习“前端免费学习笔记（深入）”；
-
p:only-of-type在<div><!-- 注释 -->\n<p>OK</p>\n<div>副信息</div></div>中依然匹配 -
li:only-of-type可安全用于动态列表：只剩一项时加圆角、去边框、增大内边距 - 配合
:has(> *:only-of-type)做容器级响应（注意：Chrome 105+、Firefox 121+ 支持，Safari 尚未全支持）
真要兜底对齐，别硬扛 CSS 伪类
当结构不可控（CMS、富文本、用户输入），CSS 伪类就是纸糊的防线。更可靠的做法是把判断逻辑移到 DOM 层：
- 服务端或构建时判断：
parent.children.length === 1后添加class="single"，再写.single > * - 前端用
MutationObserver监听子节点变化，动态增删 class - JSX/TSX 中若用
React.Fragment包裹，可减少换行干扰，但仍需警惕手动插入的空格
文本节点不渲染，但会实实在在让 :only-child 失效。眼睛看到的“只有一个”，和浏览器数出来的“只有一个”，常常不是一回事。
