:only-of-type不生效是因为它仅当父元素下同标签名子元素唯一时才匹配，无视class、id等属性；若存在多个同类型元素（即使隐藏），即失效。
为什么 :only-of-type 有时不生效？
它只匹配「父元素下该类型标签有且仅有一个」的子元素，不是“唯一子元素”，也不是“唯一类名元素”。常见误解是以为加了 class 就能限定范围，但 :only-of-type 完全不看 class、id 或属性，只看 HTML 标签名（div、p、span 等）。
比如父容器里有一个 div 和一个 p，那这个 div 就是 div:only-of-type；但如果还有另一个 div，哪怕它带 class="hidden" 或 display:none，它也立刻失效。
:only-of-type 和 :only-child 的关键区别
两者常被混用，但行为完全不同：
-
:only-child要求该元素是父元素的**唯一子节点**（不管类型），即父元素下只能有它一个孩子 -
:only-of-type允许父元素有其他类型子元素，只要同类型只有它一个
示例对比：
立即学习“前端免费学习笔记（深入）”；
<article> <h2>标题</h2> <p>段落一</p> <p>段落二</p> </article>
其中两个 p 都不满足 p:only-of-type（因为有两个 p）；h2 满足 h2:only-of-type（因为没有别的 h2），但它不满足 h2:only-child（因为还有别的子元素）。
实际能用上的典型场景
它适合处理结构已知、但内容动态插入导致数量不确定的 DOM，比如 CMS 输出或组件化模板中“可能只有一个”的区块：
- 文章页里「作者信息栏」只出现一次时统一加底边框，多次出现则取消
- 卡片列表中，当某个卡片是页面中唯一的
aside时，给它加特殊宽度或背景色 - 表单里
fieldset下若只含一个legend，就让它居中显示（多个 legend 时默认左对齐）
注意：别指望它做“逻辑判断”，它只是 CSS 选择器，无法感知数据或状态变化。
容易踩的坑和兼容性提醒
IE 完全不支持 :only-of-type（包括 IE11），如果项目还需兼容旧版 IE，必须用 JS 判断或降级为 class 控制。
更隐蔽的问题：
- 空白文本节点不影响
:only-of-type，但注释节点也不影响——很多人误以为注释会破坏“唯一性”，其实不会 - 动态插入元素后，样式会自动重算，但如果你用
innerHTML替换整个父容器，老的:only-of-type规则会重新评估，这点和 JS 判断不同步，容易造成闪动或错位 - 在 Shadow DOM 中，它只作用于 shadow root 内部的子树，跨 slot 不穿透
真正难搞的，是那些看似结构固定、实则由第三方脚本悄悄插入同类型元素的页面——这时候 :only-of-type 会悄无声息地失效，连控制台都看不出问题。
