:only-of-type在父容器中某标签名子元素有且仅有一个时生效，不关心可见性、媒体类型或js插入；它与:only-child不同，后者要求父元素下仅有一个子元素且必须是该标签。
什么时候:only-of-type真正生效
:only-of-type只看「同标签名兄弟数量」，不关心是否媒体元素、是否可见、是否被 JS 动态插入。它匹配的条件非常硬：父容器中该标签名的子元素有且仅有一个。
比如 article > img:only-of-type 会命中：
<article>@@##@@</article>但不会命中：
<article>@@##@@<p>说明</p></article>——
<p></p> 不影响匹配；也不会命中：<article>@@##@@@@##@@</article>——哪怕第二个
<img src="a.jpg"> 被 display: none 或 visibility: hidden 隐藏，它仍是 DOM 中存在的同类型兄弟，:only-of-type 直接失效。
:only-of-type和:only-child别混用
这是最常踩的坑：div:only-of-type 和 div:only-child 完全不是一回事。
-
div:only-child要求父元素下**只有一个子元素**，且这个子元素必须是<div> <li> <code>div:only-of-type允许父元素下有<p></p>、<span></span>、<ul></ul>等任意其他标签，只要<div> 是唯一的 <code><div> 就行 <p>典型误用场景：</p> <pre class="brush:php;toolbar:false;"><section><h2>标题</h2> <div class="content">正文</div></section></pre>这里 <code>.content:only-of-type成立（唯一<div>），但 <code>.content:only-child不成立（还有<h2></h2>）。想“只对单个内容块加边框”，选错伪类就白写了。媒体标签单独处理要拆开写
如果你的目标是「当页面里只有一个
<video></video>时给它加宽高比，多个就不加」，不能靠*:only-of-type一锅端——那会把<img src="a.jpg">、<audio></audio>全卷进来，语义失控。正确做法是为每种媒体标签显式声明：
video:only-of-type { aspect-ratio: 16/9; }img:only-of-type { max-width: 100%; height: auto; }audio:only-of-type { width: 100%; }
注意：
<source></source>和<track></track>是空元素，浏览器不渲染，也**永远不匹配:only-of-type**——它们不算“可样式化子元素”，别在这上面浪费调试时间。真要保底控制，得靠 wrapper 类名
:only-of-type本质依赖 DOM 结构巧合，一旦后续插入新元素（比如 CMS 自动加广告<div class="ad-banner">），样式就断了。生产环境更稳的方式是让结构带语义： <p>把「单媒体容器」显式标记出来：</p> <pre class="brush:php;toolbar:false;"><figure class="media-single"><video></video></figure></pre>然后写：<code>.media-single video { aspect-ratio: 16/9; }。这样不管父级有多少兄弟，也不管有没有隐藏的同类标签，逻辑都清晰可控。如果必须用纯 CSS 做动态判断，
:has()是方向（如section:has(video):not(:has(video ~ video))），但截至 2026 年 9 月，Safari 对:has()在伪类中的嵌套支持仍不稳定，上线前务必实测。
