div:only-of-type 只判断父容器中同类型标签（）的数量是否为1，无视其他标签、文本节点或注释；若存在多个（哪怕被其他元素隔开），即不匹配。
only-of-type 为什么经常不生效
它只看「同类型标签」在父容器里的数量，不是看「有没有其他兄弟元素」。哪怕父容器里有 <p></p>、<span></span>、文本节点甚至注释，只要有一个 <div>，那这个 <code><div> 就是 <code>div:only-of-type；但如果有两个 <div>，哪怕中间夹着五个 <code><span></span>，它也不匹配。
常见错误现象：div:only-of-type 写了却没生效，结果发现父元素里其实藏了个看不见的 <div>（比如 Vue/React 渲染残留、服务端注入、JS 动态插入）；或者误以为「只有这一个 div 标签」就等于「only-of-type」，忽略了文本节点不影响判定，但其他 <code><div> 会直接破坏条件。
<ul>
<li>检查父容器内是否真只有一个该标签——用浏览器开发者工具的「Elements」面板右键「Edit as HTML」，手动删减对比</li>
<li>注意 JS 框架可能异步插入同类型节点，CSS 规则在 DOM 尚未稳定时已计算完毕</li>
<li>
<code>:only-of-type 不吃伪元素（::before/::after），但吃真实标签和文本节点（文本节点不影响“type”计数）
替代方案：当 only-of-type 不够用时选什么
真正想表达“容器里只存在这一个元素，且它是 div”，:only-of-type 无能为力——它不管别的标签存不存在。这时候得换思路：
- 用
:first-of-type:last-of-type组合：等价于“既是第一个又是最后一个同类型”，逻辑更可控，兼容性一样好（IE9+） - 如果确定父容器只有单个子元素（不管类型），可用
:nth-child(1):nth-last-child(1)—— 它认的是位置，不是标签名 - 现代项目可考虑
:has()（Chrome 105+、Safari 15.4+）：div:has(+ *)表示后面还有兄弟，反过来写div:not(:has(+ *))可模拟“唯一子元素”，但注意:has()不支持在 CSS 中用于非动画关键帧场景
性能影响：所有这类结构性伪类都会触发浏览器重排计算，若父容器频繁增删子节点（如列表滚动加载），建议用 class 控制更稳妥。
立即学习“前端免费学习笔记（深入）”；
Vue / React 里用 only-of-type 要格外小心
框架常在组件根节点外自动包裹一层容器，或在插槽内容前后注入注释节点（如 <!--v-if-->）、空 <span></span> 或 <template></template> 占位符，这些不会被 :only-of-type 计入“type”，但同名标签一旦出现多个，规则立刻失效。
- Vue 的
<transition-group></transition-group>默认渲染为<span></span>，若你也在里面放<div>，那 <code>div:only-of-type还是成立的；但如果用了tag="div"，就可能和你的目标<div> 冲突 <li>React 18 的并发渲染可能让 DOM 短暂处于“多节点并存”状态，导致样式闪烁——别依赖纯 CSS 判定唯一性来做关键 UI 变化</li> <li>最稳做法：由组件逻辑判断数量，动态加 class，比如 <code>class="item--single"，再写.item--single { ... }
调试技巧：快速验证 only-of-type 是否命中
别靠肉眼数标签。打开控制台，在 Elements 面板中选中目标元素，输入以下命令实时验证：
getComputedStyle($0).getPropertyValue('color') // 看是否应用了预期样式
更直接的方法是运行 JS 查询：
Array.from($0.parentNode.children).filter(el => el.tagName === 'DIV').length // 返回 1 才算满足 only-of-type 条件
容易被忽略的一点：HTML 解析会把连续空白压缩成单个文本节点，但它不参与 :only-of-type 计数；而自闭合标签如 <img alt="CSS如何通过only-of-type处理唯一标签项_当容器内仅有一个同类标签时应用css" >、<br> 是独立节点，它们的存在完全不影响 div:only-of-type 的判定——这点和很多人直觉相反。
