应优先使用 :only-of-type 而非 :only-child，因后者易受 DOM 中隐藏文本节点（如换行、空格、注释）影响而失效；前者仅要求同类型元素唯一，对真实场景更鲁棒。
:only-child 能用，但绝大多数情况下你真不该直接用它——因为 DOM 里藏了看不见的文本节点，它就失效。
为什么 :only-child 经常不生效
它不是看“页面上看起来只有一个”，而是严格检查 parentNode.childNodes.length === 1。只要父节点里存在一个换行、空格、<!-- comment --> 或 React.Fragment 插入的隐藏节点，:only-child 就会跳过匹配。
- HTML 源码中每段换行缩进都可能生成
#text节点 - Vue 的
v-if编译后会留下注释节点 - React 中
>不渲染，但会影响childNodes计数 - 服务端模板（如 Twig、Nunjucks）默认保留空白，几乎必然带文本节点
验证方法：选中目标元素，在控制台运行 document.querySelector('p:only-child').parentNode.childNodes.length。如果不是 1，就别怪选择器“失灵”。
:only-child 和 :only-of-type 到底该用哪个
语义完全不同，混用等于白写：
立即学习“前端免费学习笔记（深入）”；
-
p:only-child：父元素下总共只有一个子节点，且必须是<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11112" title="CSS工具箱(专业版)"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="CSS工具箱(专业版)" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11112" title="CSS工具箱(专业版)">CSS工具箱(专业版)</a> <p>全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。</p> </div> <a href="/xiazai/skill11112" title="CSS工具箱(专业版)" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>——容不得任何其他节点（哪怕<div> 或换行）<li> <code>p:only-of-type：父元素下没有别的<p></p>，但可以有<div>、注释、换行等——对真实 DOM 更宽容<p>90% 的“列表只剩一项时加圆角”“卡片只有一段文字时加大间距”这类需求，真正要的是 <code>:only-of-type。它对富文本、CMS、用户生成内容等不可控场景更友好。真正能用的写法示例
假设你有一个动态列表容器，想在仅含一项时让圆角居中：
.list li:only-of-type { border-radius: 6px; padding: 12px 16px; text-align: center; } .list:has(> li:only-of-type) { text-align: center; }注意：
:has()需 Chrome 105+ / Firefox 121+；Safari 尚未全支持。若需兼容旧版，建议服务端或构建阶段判断parent.children.length === 1后加class="single"，再写.single > *。真正要兜底，得从 DOM 层面确认数量
别低估文本节点的存在感——它不渲染，但会实实在在让
:only-child失效。如果你必须用:only-child，就得保证 HTML 是紧凑无换行的：<ul>xxx</ul>，连空格都不能有。否则，不如一开始就放弃它。
