p:only-of-type未加边框是因为父元素下存在多个同名p标签，即使其中一个被隐藏、注释或动态注入，只要数量≥2即不匹配；需确保该类型标签在父容器中唯一且为直接子元素。
为什么 p:only-of-type 没加边框？父容器里多了一个“隐身”的 p
它不看 class、id、display: none、空内容或注释，只数同名标签数量。只要父元素下存在两个 p，哪怕其中一个被 JS 隐藏、Vue 注入、或 SSR 渲染残留，任一都不匹配 p:only-of-type。
常见翻车现场：
- React/Vue 组件中插槽前后自动插入的
<!-- -->注释节点不影响计数，但同名标签一旦出现多个就直接失效 -
<div> <p>A</p> <p style="display:none"></p> </div>—— 两个p，全不匹配 - 服务端渲染时动态注入占位
<p class="skeleton"></p>，前端 JS 还没删掉它，样式已计算完毕
.card > img:only-of-type 和 .card img:only-of-type 差在哪？层级控制决定是否误命中
不加 > 的写法会匹配所有后代 img，包括子组件内部嵌套的图标、加载占位图、甚至第三方库插入的 <img> —— 你本意只想给卡片主图加边框，结果侧边栏小图标也被套上了。
安全写法必须限定为直接子元素：
- 用
.card > img:only-of-type，确保只检查.card下第一层img - 把图片包进语义容器如
<figure></figure>，避免<figcaption></figcaption>干扰（它不是img类型） - 若卡片结构可能含多个
img（如头像 + 主图），别硬用:only-of-type，改用 class 控制更稳
想表达“父容器只有一个子元素，且它是 div”，div:only-of-type 不够用
div:only-of-type 只确认“父容器里有没有别的 div”，不管有没有 p、ul 或文本节点。所以 <div>
<div>A</div>
<p>B</p>
</div> 中那个 div 依然匹配 —— 它确实是唯一 div，但不是唯一子元素。
真要锁死“单子元素 + 类型确定”，得换组合：
-
div:first-of-type:last-of-type：等价于“既是第一个又是最后一个div”，逻辑更严密 -
div:nth-child(1):nth-last-child(1)：认位置不认类型，适合父容器只允许一个子元素的场景 - 现代浏览器可用
div:not(:has(+ *))，但注意:has()在非动画关键帧中支持有限（Chrome 105+ / Safari 15.4+）
边框加不上？检查三个视觉陷阱
样式写了却看不见，往往不是选择器问题，而是边框本身被布局或渲染机制吃掉了：
- 别用
border全方向，优先选border-bottom或outline，避免窄屏下左右溢出 - 确保
box-sizing: border-box已启用，否则边框会撑宽容器，导致布局错位或被裁剪 - 父容器若有
padding，边框起点会偏移；建议统一用内边距补偿，或直接上outline（不占空间） - 多个条件共存时顺序不能错：
p.unique:only-of-type✅，p:only-of-type.unique❌（伪类不能后置 class）
真正难的不是写出正确的选择器，而是保证 DOM 在加载中、JS 插入后、SSR 差异、框架更新等所有状态下，都持续满足“该类型唯一”这个硬条件。一旦结构松动，样式静默失效，控制台连警告都不会报。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
