:only-child在单元素自适应布局中几乎不可靠，因其依赖parentnode.childnodes.length===1，而换行、空格、注释、框架注入节点等均会破坏该条件；应优先使用兼容性良好的:only-of-type或js/构建时逻辑兜底。
:only-child 在单元素自适应布局中几乎不可靠——它要求父节点 childNodes.length === 1，而真实 HTML 中的换行、空格、注释、框架注入节点（如 Vue 的 <!--v-if-->、React 的 Fragment）都会破坏这个条件。你看到“只有一个元素”，但 DOM 里早就不止一个节点了。
为什么 :only-child 在响应式场景下大概率失效
它不看渲染结果，只数 parentNode.childNodes，哪怕只是写了一行换行符：
-
<div class="card">\n <p>仅此一条</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>\n</div>→ 换行生成两个#text节点，p:only-child不匹配 - Vue 模板里
<p v-if="show">...</p>编译后留下注释节点，计入子节点总数 - 服务端模板（Twig/Nunjucks）默认保留空白，CMS 输出的 HTML 几乎必然含不可控文本节点
-
display: none的兄弟元素仍参与计数，:only-child不认“是否可见”
真正该用的是 :only-of-type
它只关心同类型元素数量，对结构宽容得多，90% 的“单条数据适配”场景都该换它：
-
ul li:only-of-type→ 列表只剩一项时加圆角/居中，不管有没有<div> 或注释 <li> <code>.notification:only-of-type→ 单条提示消息时加边框、提升 z-index，不怕富文本混入其他标签 -
article > p:only-of-type→ 文章正文仅一段时放大字号、增加行高，忽略<img>或<figure></figure> - 注意：它不兼容 IE，但 Chrome 105+、Firefox 121+、Safari 16.4+ 均已支持
- 服务端或构建时判断
parent.children.length === 1，加 classsingle-child，再写.single-child > * - 前端用
MutationObserver监听子节点变化，动态增删is-single类 - 用
:has(> *:only-of-type)做容器级响应（如.list:has(> li:only-of-type)），但注意 Safari 当前仍不支持:has嵌套伪类
当结构完全不可控时，别硬扛 CSS
伪类不是万能胶，DOM 层面不干净，样式就注定失效。更稳妥的做法是把判断逻辑交给 JS 或构建阶段：
别指望眼睛看结构“干净”就安全——打开控制台跑一句 document.querySelector('p:only-child').parentNode.childNodes.length，十次有九次不是 1。真要兜底，得从 DOM 数量确认开始，而不是在 CSS 里反复试错。
