:only-child要求父元素子节点唯一且为目标元素本身，不含文本、注释或Fragment；实际中因DOM中存在不可见节点常失效，多数场景应使用更鲁棒的:only-of-type。
:only-child 很难真正“精准”匹配，除非你完全控制父元素的 DOM 结构 —— 它要求父节点的 childNodes.length === 1，而这个“1”必须是且仅是目标元素本身，不包括任何文本节点、注释或 Fragment。
为什么 p:only-child 经常不生效
不是选择器写错了，也不是浏览器问题，而是 HTML 或框架生成的 DOM 比你看到的多：
- HTML 源码里每行缩进、换行都会生成一个
#text节点（哪怕只是空格） - Vue 模板默认保留空白，
v-if编译后可能插入<!-- -->注释节点 - React 的
>（Fragment）不渲染内容，但会保留在childNodes中 - 服务端模板（如 Twig、Nunjucks）输出的 HTML 几乎必然含不可见节点
验证方法：在控制台执行 document.querySelector('.target').parentNode.childNodes.length。结果不是 1，那 :only-child 就不可能触发。
:only-child 和 :only-of-type 到底该用哪个
90% 的场景其实要的是“同类型唯一”，不是“整体唯一” —— 这正是 :only-of-type 的设计目的：
-
p:only-child：父元素下除了这个<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>，不能有任何其他节点（包括换行、<hr>、<div class="loading">）<li> <code>p:only-of-type：父元素下可以有<h2></h2>、<hr>、空行，只要只有这一个<p></p>，就命中 - CMS 富文本、用户输入、动态列表等真实项目中，
:only-of-type的鲁棒性远高于:only-child - 服务端渲染时判断
parent.children.length === 1，直接输出class="single" - React 中用
useEffect检查ref.current?.children.length === 1，动态加类 - CSS 写成
.list li.single { ... }，彻底避开伪类对 DOM 结构的苛刻要求
示例：.list li:only-of-type { border-radius: 6px; padding: 12px 16px; } —— 单项列表圆角，不依赖容器“干干净净”。
需要兼容旧浏览器或绕过 DOM 干扰时怎么做
:has()（如 .list:has(> li:only-of-type)）在 Safari 18.0 之前不支持，不能作为兜底主力：
这种“状态驱动样式”的方式，在复杂组件或 SSR 场景下更可控，也更容易测试。
真正难的从来不是写对一个伪类，而是意识到：DOM 不是你写的 HTML 字符串，而是浏览器解析后的树 —— 那些看不见的节点，才是 :only-child 失效的元凶。
