:only-child 选择器用于选中其父元素中唯一的子元素，如 p:only-child { color: red; } 仅在父元素只有一个 p 时生效；2. 它等同于同时满足 :first-child 和 :last-child；3. 常用于单图片居中、单列表项美化或单输入框扩展等场景，理解为“父元素仅有一个子元素”即可准确应用。

要选择只有一个子元素的父元素中的那个唯一子元素，可以使用 :only-child 伪类选择器。这个选择器匹配的是：在其父元素中唯一一个子元素的元素。

1. :only-child 基本用法

当某个元素是其父容器中唯一的子元素时，:only-child 就会生效。

例如，下面的 CSS 会选中父元素中唯一的 p 元素：

对应的 HTML 示例：

这个段落文字会变成红色。但如果父元素中有多个子元素，p:only-child 就不会匹配。

2. 区分 :only-child 和 :first-child 或 :last-child

:only-child 是 :first-child 和 :last-child 同时成立的情况。也就是说，一个元素只有在既是第一个也是最后一个子元素时，才会被 :only-child 选中。

举例说明：

  

段落1

  

段落2

在这个例子中，两个 p 元素都不是 :only-child，因为它们不是唯一的子元素。

3. 实际应用场景

常见用途包括：

• 当内容区域只有一张图片时，让它居中或放大显示
• 如果列表只有一项，调整其样式避免显得空旷
• 表单中只有一个输入框时，自动拉宽宽度

示例：让只有一个子元素的容器中的图片居中并放大

基本上就这些。只要理解“only-child”的含义是“我爸爸只有我一个孩子”，就能准确使用它。不复杂但容易忽略细节。