:only-of-type 更适合动态列表场景，因它仅要求同类型子元素唯一，不受空白文本节点或注释节点影响；而 :only-child 要求父容器子节点总数为1，真实项目中dom结构难以满足该硬条件。
它在动态列表中并不好用——绝大多数情况下会失效，别被“语义清晰”误导。
为什么写了 p:only-child 却没生效
不是浏览器不支持，是 DOM 树里根本没满足 parentNode.children.length === 1 这个硬条件：
- JSX 中的换行、空格会生成
#text节点（document.querySelector('div').childNodes.length可验证） -
<react.fragment></react.fragment>不渲染内容，但保留在childNodes中 - Vue 模板默认保留空白，
v-if编译后插入<!-- -->注释节点 - 服务端模板（如 Twig、Nunjucks）输出的 HTML 几乎必然含不可见节点
:only-child 和 :only-of-type 到底该选哪个
90% 的动态列表场景要的是“同类型唯一”，不是“整体唯一”：
-
li:only-child：父容器里除了这个li，不能有任何其他节点（哪怕一个空格也不行） -
li:only-of-type：只要没有别的li，旁边有<div class="loading">、<code><hr>或换行符都完全不影响匹配 - CMS 富文本、用户输入、第三方组件嵌入等不可控内容流，
:only-of-type是事实标准 - React 中用
useEffect检查ref.current?.children.length === 1，然后加class="single" - Vue 中在
mounted钩子执行同样判断，绑定:class="{ 'single': isSingle }" - CSS 写成
.list.single > li，彻底绕过伪类干扰和兼容性问题 - 服务端渲染时直接判断子节点数，输出对应 class，避免客户端 JS 补救
真要响应“只剩一项”逻辑，JS 判断比伪类更可靠
伪类依赖 DOM 结构干净，而真实项目里结构从来都不干净：
真正容易被忽略的是：伪类生效的前提是“结构可控”，而动态列表的 DOM 结构几乎永远不可控。把样式逻辑押注在 :only-child 上，等于把稳定性交给换行符和构建工具配置。
