:only-of-type只匹配父容器中同名标签的唯一子元素，不关心其他类型兄弟、隐藏状态或语义；p:only-of-type在混排时比p:only-child更实用，video:only-of-type作用域限于直接子级，兼容ie9+。
:only-of-type 只匹配父容器中**该标签名的唯一子元素**，不看其他类型兄弟、不看是否隐藏、也不管内容语义——它只做一件事：数同名标签有几个。理解这点，才能避免样式意外生效或完全失效。
为什么 p:only-of-type 有时比 p:only-child 更实用
当父容器里有 <p></p> 和 <span></span> 混排时，p:only-child 永远不匹配（因为 <p></p> 不是唯一子元素），但 p:only-of-type 仍可命中——只要没第二个 <p></p>。
- 适用场景：文章段落块内插入少量说明文字（
<span></span>或<small></small>），仍想给唯一正文段落加特殊缩进或行高 - 注意陷阱：如果 CMS 自动注入了
<div class="ads"> 或 <code><script></script>，它们不影响p:only-of-type匹配；但若后台误插了第二个<p></p>，样式就丢了 - 兼容性无顾虑：IE9+ 全支持，无需 polyfill
- ✅ 安全用法：
article > video:only-of-type { aspect-ratio: 16/9; width: 100%; }—— 仅当 article 直接子级中独有一个<video></video>才生效 - ❌ 常见误用：
section video:only-of-type会匹配到嵌套在<figure></figure>里的<video></video>，哪怕 section 内还有<img>和另一个<video></video>（只要那个<video></video>不在相同层级） - ⚠️ 隐藏元素仍计数：
video[hidden]或display: none的<video></video>依然破坏:only-of-type匹配 - 若写
figure:only-of-type，目标是“这个<section></section>下只有一组<figure></figure>”，但它对里面有没有<figcaption></figcaption>或<p></p>完全不敏感 - 若写
figure:only-child，则要求<section></section>里**除了这个<figure></figure>外不能有任何其他子节点**（包括空格文本节点）——这在模板渲染中极难保证 - 调试建议：在 DevTools 中右键父元素 → “Edit as HTML”，删掉疑似干扰节点再刷新，比反复改 CSS 更快定位问题
video:only-of-type 在媒体容器中真正能用好的条件
它不是“页面里只有一个 <video></video>”的选择器，而是“这个 <section></section> 下只有一个 <video></video> 标签”的判断器。很多布局失败，是因为忽略了它的作用域局限。
和 :only-child 混用时最容易踩的 DOM 结构坑
两者逻辑完全不同，但 HTML 结构稍一变动，效果就天差地别。不要靠猜，要靠检查实际 DOM 层级。
真正难的是动态内容场景：当 JS 插入或移除同类型元素时，:only-of-type 的样式会瞬间切换，但你没法监听这个变化。需要这类响应式行为时，得靠 class 切换或 :has()（注意 Safari 对 :has(video ~ video) 支持仍不稳定）。
