:only-of-type仅在父元素中该标签名真实存在且唯一时匹配；最常见失效原因是dom中存在隐藏、空、动态插入或大小写不敏感的同类型兄弟元素，它只计数不判内容。
:only-of-type 只在父元素中**该标签名出现且仅出现一次**时才匹配，不是“看起来只有一个”，而是“数出来就一个”——多一个、少一个、藏一个，都不算。
为什么写了 p:only-of-type 却没生效
最常踩的坑是 DOM 里有“看不见的同类型兄弟”：
-
<p></p>这种空标签也算，哪怕display: none或visibility: hidden - JS 动态插入了另一个
<p></p>，但你没刷新开发者工具看实时结构 - Vue/React 渲染后，插槽里悄悄多了个
<p></p>（比如错误边界 fallback、条件渲染残留） - HTML 中写了
<p></p>（大写），浏览器仍解析为p类型，和小写<p></p>算重复
:only-of-type 和 :only-child 的关键区别
它们判断逻辑完全不同，混用会出视觉偏差：
-
p:only-child：父元素**总共只有一个子元素**，且这个子元素是p—— 有<p></p> <span></span>就不匹配 -
p:only-of-type：父元素里**只有这一个p标签**，其他兄弟可以是<div>、<code><h2></h2>、文本节点甚至注释 —— 它完全无视这些 - 误写成
aside :only-of-type（没带标签名）会匹配所有唯一类型子元素，比如<p></p>和<nav></nav>都可能被样式污染 - 限定作用域：
.article > img:only-of-type，用子选择器>防止嵌套容器里的图意外命中 - 语义包裹：
<figure><img><figcaption></figcaption></figure>，这样加<figcaption></figcaption>不影响img:only-of-type判断 - 别依赖它做逻辑判断：它无法区分
src是否相同，也无法感知图片是否加载失败后被 JS 替换 —— 真要控制行为，得用 class 或 JS
安全使用 img:only-of-type 的三个实操要点
图文卡片场景下最容易翻车，必须手动加固：
真正难的不是写对语法，而是确认 DOM 结构在任意时刻都满足“唯一”这个硬条件；框架注入、服务端模板、第三方脚本都可能悄悄打破它，所以生产环境建议优先用显式 class 控制，:only-of-type 更适合作为兜底或静态页面的轻量方案。
