p:only-of-type未生效的最常见原因是父容器中存在多个同名标签，即使其中一个被display:none隐藏或为空，仍破坏“唯一性”条件。
为什么写了 p:only-of-type 却没加边框？
最常见原因是父容器里“多了一个看不见的同类型兄弟”。:only-of-type 不认 class、id、display: none、空标签或注释，只数同名标签数量。比如：
<div><p>A</p><p style="display:none"></p></div>两个
p 共存，任一都不匹配 p:only-of-type。
img:only-of-type 加边框时要注意父容器结构
别直接写 .card img:only-of-type，容易被子容器里的 img 意外命中。应限定层级：
- 用
.card > img:only-of-type，确保只匹配直接子元素 - 把图片包在语义明确的
<figure>里，避免<figcaption>干扰判断（它不是img类型） - 如果卡片里可能动态插入图标或占位图，提前检查 DOM 是否真只有一个
img
aside h2:only-of-type 为何有时失效？
它其实没失效，是结构理解错了。这个选择器只关心 h2 在 aside 里是否唯一，不管有没有 <p> 或 <nav>。真正翻车点在于：
- 误写成
aside :only-of-type（无标签名），结果所有唯一类型子元素都中招，比如p和nav都被加边框 - JS 后续插入了另一个
h2，样式自动撤回——这不是 bug，是设计行为 - 用了大写标签如
<H2>，HTML 解析后仍算h2类型，造成重复
边框样式写法本身要避开视觉陷阱
别依赖 :only-of-type 做逻辑判断，它只是样式开关。实际加边框时：
立即学习“前端免费学习笔记（深入）”；
- 用
border-bottom而非border，避免左右边框在窄屏下溢出 - 搭配
box-sizing: border-box，防止边框影响布局宽度 - 如果父容器有 padding，边框位置可能偏移，建议统一用
outline或内边距补偿 - 多个条件共存时（如“唯一且有 class”），必须写成
p.unique:only-of-type，顺序不能颠倒
