:only-of-type只判断同级中同标签是否唯一，无视class等属性；真正需要“唯一某类元素”时应改用:is(.item):not(.item ~ .item)或JavaScript检测。
only-of-type() 为什么选不到你想要的元素
它只看“同级兄弟中该标签类型是否唯一”，不关心类名、属性或嵌套结构。常见错觉是以为 :only-of-type 能匹配“只有一个 div 类且 class="item" 的元素”，其实它完全忽略 class。
- 如果父容器里有
div、p、div，两个div都不满足:only-of-type - 哪怕只有一个
div，但旁边还有span和em，这个div仍算:only-of-type - 它和
:nth-of-type(1):nth-last-of-type(1)等价，但后者更绕，也更难调试
替代 :only-of-type 的真实需求场景
多数人真正想表达的是：“这个元素在父容器里是唯一带某 class 的”，或者“唯一符合某属性组合的”。这时候 :only-of-type 无能为力，得换思路：
- 用
:is(.item):not(.item ~ .item)—— 表示存在 .item，且后面没再出现 .item（兼容性到 Chrome 100+/Safari 15.4+） - 用 JavaScript 判断：
el.parentElement.querySelectorAll('.item').length === 1，再加 class 或样式 - 若必须纯 CSS 且需兼容旧浏览器，老老实实用 JS 控制 class，比如加个
is-only-item
:only-of-type 和 :only-child 的关键区别
这两个伪类常被混用，但行为完全不同：
-
:only-child要求该元素是父容器**唯一的子元素**（不管标签名），div:only-child在<div></div>里才生效 -
:only-of-type只要求该元素是父容器中**该标签类型的唯一一个**，允许其他类型兄弟存在 - 比如父元素是
<div> <p>A</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <div>B</div> <span>C</span> </div>：中间的div是:only-of-type，但不是:only-child
实际项目中容易被忽略的兼容性细节
:only-of-type 在 IE9+ 和所有现代浏览器都支持，看似很稳，但有两个隐形坑：
- 空格/换行文本节点不影响判断（DOM 中的
Text节点不算“元素”，所以不影响:only-of-type计数） - 动态插入元素后，样式不会自动重算——比如用 JS 新增一个同类型兄弟，已渲染的元素不会“失去”
:only-of-type状态，除非强制重排或重绘 - SSR 渲染时若服务端与客户端 DOM 结构不一致（比如服务端多塞了个
div），可能导致样式错乱，且难以排查
