:only-of-type只统计父元素下同标签名的直接子元素数量，等于1即匹配，无视class、id、display状态及文本/注释节点；多一个同名标签（含隐藏或框架注入）即失效。
只看标签名，不看其他任何东西
:only-of-type 的判断逻辑非常机械：它只统计父元素下**同标签名的直接子元素数量**。只要这个数字等于 1，就匹配；大于 1，立刻失效。它完全无视 class、id、style、内容是否为空、display: none 状态，甚至无视兄弟节点是 <p></p> 还是文本节点或注释。
常见错误现象：p:only-of-type 写对了却没生效，十有八九是因为 DOM 里多了一个看不见的 <p></p> —— 比如 Vue 渲染残留的空 <p></p>、服务端模板注入的占位 <p></p>、或 JS 动态插入的隐藏段落。
- 用浏览器开发者工具打开 Elements 面板，右键父容器 → “Edit as HTML”，手动删掉疑似多余的同名标签，观察样式是否恢复
- 检查是否误写了大写标签（如
<p></p>），HTML 解析后仍算作p类型，会破坏唯一性 -
<script></script>和 HTML 注释不影响计数，但<template></template>标签在某些框架中可能被解析为真实节点，需警惕
为什么 .card img:only-of-type 容易翻车
不加限制地使用 .card img:only-of-type 是高危写法。它会匹配所有满足“父元素中只有一个 img”的图片，不管这个 img 是在 .card 直接子层，还是嵌套在 .card > .content > .figure 里。
真正安全的写法是限定层级：
立即学习“前端免费学习笔记（深入）”；
- 用
.card > img:only-of-type，确保只作用于.card的直接子img - 把图片语义化包裹进
<figure></figure>，再写figure > img:only-of-type，这样即使后面加了<figcaption></figcaption>也不影响判断 - 避免和
:only-child混用：比如.sidebar h2:only-of-type只关心 h2 是否唯一，而.sidebar > :only-child才表示整个父容器只有一项子元素
:only-of-type 和 :first-of-type:last-of-type 的区别
:only-of-type 是“数量判断”，:first-of-type:last-of-type 是“位置判断”。两者在多数场景效果一致，但行为逻辑不同。
当父元素中只有一个 p 时：
-
p:only-of-type匹配，因为数量为 1 -
p:first-of-type:last-of-type也匹配，因为第一个p同时也是最后一个p
关键差异在于动态场景：:only-of-type 在 JS 插入第二个 p 时会立即失效；而 :first-of-type:last-of-type 即使插入多个 p，只要目标 p 仍是第一个且最后一个（比如它被移出又插回），样式仍可能保留——但这不是稳定行为，依赖插入顺序。
兼容性上两者一致（IE9+），但 :first-of-type:last-of-type 更显式表达“首尾重合”的意图，可读性略高。
Vue/React 中用 :only-of-type 要格外小心
框架会在组件渲染时自动注入注释节点（如 <!--v-if-->）、空 <div></div> 或 <template></template> 占位符。这些节点本身不影响 :only-of-type 计数（它们不是 p 或 img），但一旦你在插槽或动态内容里不小心多加了一个同类型标签，规则就崩了。
更稳妥的做法：
- 用
v-if/{condition && <p>...</p>}控制是否渲染，而非依赖 CSS 判断“唯一性” - 给唯一情况加 class，比如
class="single-img"，再写.single-img img，逻辑更可控 - 若必须用伪类，优先选
:has()（Chrome 105+、Safari 15.4+）：div:not(:has(img + img))表示“后面没有另一个 img”，语义更贴近业务需求
真正容易被忽略的点是：CSS 规则在 DOM 渲染完成前就已计算完毕。JS 异步插入节点后，样式不会自动重算 —— 你看到的“失效”，其实是初始状态下的正确结果。
