简介

:only-child 选择器用于选择父元素中唯一的一个子元素。它是一个伪类选择器，只能用于选择直接子元素，不能用于选择嵌套子元素。

语法

parent-selector:only-child {
  /* 样式规则 */
}

用法

:only-child 选择器可以用于各种场景，例如：

• 为页面上唯一的元素应用样式
• 为父元素中唯一的子元素应用样式
• 为特定父元素中唯一的子元素应用样式

示例

为页面上唯一的元素应用样式

<div id="unique-element">...</div>

#unique-element:only-child {
  color: red;
}

为父元素中唯一的子元素应用样式

<div id="parent">
  <p>...</p>
</div>

#parent:only-child {
  border: 1px solid black;
}

为特定父元素中唯一的子元素应用样式

<div id="parent1">
  <p>...</p>
</div>

<div id="parent2">
  <p>...</p>
  <span>...</span>
</div>

#parent1 p:only-child {
  font-weight: bold;
}

#parent2 p:only-child {
  color: blue;
}

支持

:only-child 选择器在所有现代浏览器中都得到了良好的支持，包括：

• Chrome
• Firefox
• Safari
• Edge
• Opera

注意事项

• :only-child 选择器只能用于选择直接子元素。
• 如果父元素有多个子元素，即使其中一个子元素是唯一的，:only-child 选择器也不会匹配任何元素。
• :only-child 选择器不能与 :first-child 或 :last-child 选择器结合使用。

替代方案

在某些情况下，可以使用其他选择器来实现与 :only-child 选择器相同的效果。例如：

• > p 选择父元素的直接子元素 p。
• p:first-child:last-child 选择父元素中唯一的子元素 p。

但是，这些替代方案可能不适用于所有情况，因此最好根据需要使用 :only-child 选择器。