简介

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

语法

-------------------------- -
  -- ---- --
-

用法

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

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

示例

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

---- -----------------------------

-------------------------- -
  ------ ----
-

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

---- ------------
  ----------
------

------------------ -
  ------- --- ----- ------
-

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

---- -------------
  ----------
------

---- -------------
  ----------
  ----------------
------

-------- ------------ -
  ------------ -----
-

-------- ------------ -
  ------ -----
-

支持

: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 选择器。