CSS伪类:only-child和:only-of-type有什么作用_子元素样式控制

:only-child 在元素是父容器中唯一子元素时生效，无论类型；2. :only-of-type 在元素是同类型中唯一一个时生效，允许其他类型兄弟节点存在；二者 区别 在于匹配范围，合理使用可减少类名依赖，提升样式效率。

:only-child 和 :only-of-type 是 css 中用于精确控制子元素样式的 伪类选择器，它们帮助开发者在特定条件下为元素添加样式，而无需额外的类名或 javaScript。

:only-child：唯一子元素时生效

当一个元素是其父容器中 唯一的子元素 时，:only-child 会匹配该元素。这意味着它没有兄弟节点，不论类型。

例如：

• 如果某个 div 只包含一个 p 标签，那么这个 p 就是 :only-child。
• 如果有多个子元素（哪怕只有一个可见），:only-child 就不会生效。

常见用途：避免在列表项多于一个时应用特殊边距或背景。

立即学习 “ 前端免费学习笔记（深入）”；

示例：

p:only-child {color: red;   font-weight: bold; }

只有当 p 是父元素中唯一的子元素时，文字才会变红加粗。

卡拉 OK 视频制作

卡拉 OK 视频制作，在几分钟内制作出你的卡拉 OK 视频

178

查看详情

:only-of-type：同类型唯一时生效

:only-of-type 更加灵活，它表示该元素在其父容器中是 某一类型中的唯一一个。比如，即使有其他不同标签存在，只要它是唯一的 p 或唯一的 img，就能被选中。

典型场景：

• 一篇文章中只有一张图片，想给这张图加边框或居中。
• 段落只有一个时调整行高或字体大小。

示例：

img:only-of-type {display: block;   margin: 0 auto;   border: 2px solid #ccc;}

即使 img 前后有 h2、p 等其他标签，只要页面中只有一个 img，样式就会生效。

两者 区别 关键在于“所有子元素”和“同类元素”的范围差异。使用时根据结构需求选择，能有效减少冗余类名，提升样式维护性。

基本上就这些，用对了很省事。