: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% 的动态列表场景要的是“同类型唯一”，不是“整体唯一”：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• li:only-child：父容器里除了这个 li，不能有任何其他节点（哪怕一个空格也不行）
• li:only-of-type：只要没有别的 li，旁边有 <div class="loading">、<code><hr> 或换行符都完全不影响匹配
• CMS 富文本、用户输入、第三方组件嵌入等不可控内容流，:only-of-type 是事实标准

真要响应“只剩一项”逻辑，JS 判断比伪类更可靠

伪类依赖 DOM 结构干净，而真实项目里结构从来都不干净：

立即学习“前端免费学习笔记（深入）”；

• React 中用 useEffect 检查 ref.current?.children.length === 1，然后加 class="single"
• Vue 中在 mounted 钩子执行同样判断，绑定 :class="{ 'single': isSingle }"
• CSS 写成 .list.single > li，彻底绕过伪类干扰和兼容性问题
• 服务端渲染时直接判断子节点数，输出对应 class，避免客户端 JS 补救

真正容易被忽略的是：伪类生效的前提是“结构可控”，而动态列表的 DOM 结构几乎永远不可控。把样式逻辑押注在 :only-child 上，等于把稳定性交给换行符和构建工具配置。