当元素是其父元素中唯一子元素时，:only-child 伪类生效，用于为单一子元素应用特定样式。例如 p:only-child { color: blue; } 仅在 p 为独生子时生效，适用于响应式设计、提示框强调、单图居中等场景。与 :only-of-type 不同，:only-child 不区分类型，要求该元素是唯一的直接子元素。可结合类选择器实现更精准控制，如 .card:only-child 设置圆角居中，提升单卡片布局美观性。
:only-child 是 CSS 中的一个结构性伪类，用于选中其父元素中唯一的子元素。当某个元素是其父级的唯一直接子元素时，:only-child 会生效，从而允许你为这种“孤立”或“单独存在”的子元素应用特定样式。
基本语法与使用场景
:only-child 的语法非常简单：
p:only-child {color: blue;
}
上面的规则表示：如果 p 元素是其父元素中唯一的子元素，就将其文字颜色设为蓝色。
例如以下 HTML 结构中，段落会被选中：
我是唯一的子元素
但如果父元素中有多个子元素，:only-child 就不会匹配：
第一个段落
第二个段落
此时两个 p 都不是 :only-child，因此样式不生效。
实际应用场景示例
:only-child 在响应式设计或动态内容中特别有用，比如处理可能只返回一条数据的列表、提示信息块或媒体容器。
- 当文章只有一个段落时，增大字体提升可读性
- 在图片画廊中，若仅上传一张图，自动居中显示
- 表单中只有一个输入项时调整布局间距
示例：只为单一提示信息添加强调样式
.alert:only-child {
border-left: 5px solid orange;
margin: 20px 0;
padding-left: 15px;
}
这样，只有当页面中只有一个提示框时才添加左侧边框强调；若有多个，则保持简洁样式。
与其他伪类的区别
:only-child 容易与 :only-of-type 混淆，但两者有本质区别：
- :only-child 要求该元素是父元素下唯一的任意类型子元素
- :only-of-type 表示该元素是其父元素中某一种标签类型的唯一实例，但允许其他类型元素共存
举例说明：
标题
正文内容
在这个结构中：
-
h2:only-child→ 不匹配（因为还有 p） -
p:only-of-type→ 匹配（只有一个 p） -
p:only-child→ 不匹配（不是唯一子元素）
结合类选择器增强控制力
你可以将 :only-child 与其他选择器组合，实现更精细的样式控制。
例如，只对某个类别的唯一子元素设置圆角：
.card-container > .card:only-child {border-radius: 12px;
width: 80%;
margin: 0 auto;
}
这在卡片布局中很实用：单张卡片自动居中并加圆角，多张则平铺排列。
基本上就这些。:only-child 是个轻量但有效的工具，适合处理内容数量不确定的 UI 场景，让样式更智能地响应结构变化。不复杂但容易忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
