:only-child 选择器用于选中其父元素中唯一的子元素，如 p:only-child { color: red; } 仅在父元素只有一个 p 时生效；2. 它等同于同时满足 :first-child 和 :last-child；3. 常用于单图片居中、单列表项美化或单输入框扩展等场景，理解为“父元素仅有一个子元素”即可准确应用。
要选择只有一个子元素的父元素中的那个唯一子元素，可以使用 :only-child 伪类选择器。这个选择器匹配的是：在其父元素中唯一一个子元素的元素。
1. :only-child 基本用法
当某个元素是其父容器中唯一的子元素时，:only-child 就会生效。
例如，下面的 css 会选中父元素中唯一的 p 元素：
p:only-child {
color: red;
}
对应的 html 示例：
立即学习“前端免费学习笔记（深入）”；
<div>
<p>我是唯一的子元素</p>
</div>
这个段落文字会变成红色。但如果父元素中有多个子元素，p:only-child 就不会匹配。
2. 区分 :only-child 和 :first-child 或 :last-child
:only-child 是 :first-child 和 :last-child 同时成立的情况。也就是说，一个元素只有在既是第一个也是最后一个子元素时，才会被 :only-child 选中。
举例说明：
<div>
<p>段落1</p>
<p>段落2</p>
</div>
在这个例子中，两个 p 元素都不是 :only-child，因为它们不是唯一的子元素。
3. 实际应用场景
常见用途包括：
- 当内容区域只有一张图片时，让它居中或放大显示
- 如果列表只有一项，调整其样式避免显得空旷
- 表单中只有一个输入框时，自动拉宽宽度
示例：让只有一个子元素的容器中的图片居中并放大
img:only-child {
display: block;
margin: 0 auto;
max-width: 80%;
}
基本上就这些。只要理解“only-child”的含义是“我爸爸只有我一个孩子”，就能准确使用它。不复杂但容易忽略细节。