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 意外命中。应限定层级：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 用 .card > img:only-of-type，确保只匹配直接子元素
• 把图片包在语义明确的 <figure></figure> 里，避免 <figcaption></figcaption> 干扰判断（它不是 img 类型）
• 如果卡片里可能动态插入图标或占位图，提前检查 DOM 是否真只有一个 img

aside h2:only-of-type 为何有时失效？

它其实没失效，是结构理解错了。这个选择器只关心 h2 在 aside 里是否唯一，不管有没有 <p></p> 或 <nav></nav>。真正翻车点在于：

• 误写成 aside :only-of-type（无标签名），结果所有唯一类型子元素都中招，比如 p 和 nav 都被加边框
• JS 后续插入了另一个 h2，样式自动撤回——这不是 bug，是设计行为
• 用了大写标签如 <h2></h2>，HTML 解析后仍算 h2 类型，造成重复

边框样式写法本身要避开视觉陷阱

别依赖 :only-of-type 做逻辑判断，它只是样式开关。实际加边框时：

• 用 border-bottom 而非 border，避免左右边框在窄屏下溢出
• 搭配 box-sizing: border-box，防止边框影响布局宽度
• 如果父容器有 padding，边框位置可能偏移，建议统一用 outline 或内边距补偿
• 多个条件共存时（如“唯一且有 class”），必须写成 p.unique:only-of-type，顺序不能颠倒

真正难的不是写对选择器，而是确认 DOM 结构在各种状态（加载中、JS 插入、服务端渲染差异）下始终满足“唯一”这个硬条件。一旦结构松动，样式就静默失效，连控制台都报不出错。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！