:only-child

:only-child 伪类 选择器属性在 CSS 中表示一个元素，该元素具有父元素，并且其父元素没有其他元素子节点。 这与 :first-child:last-child 或 :nth-child(1):nth-last-child(1) 相同，但特异性较低。

div p:only-child {
  color: red;
}

例如，如果我们将段落嵌套在 <div> 中，如下所示…

<div>
  <p>This paragraph is the only child of its parent</p>
</div>
 
<div>
  <p>This paragraph is the first child of its parent</p>
  <p>This paragraph is the second child of its parent</p>
</div>

现在我们可以为第一个子节点 <div> 的唯一 <p> 设置样式。 随后的 <div> 及其子节点永远不会被设置样式，因为父容器包含多个子节点（即 p 标签）。

p:only-child {
  color:red;
}

我们也可以像这个示例这样混合使用其他伪类，它选择嵌套 div 中的第一个段落以及 div.contain 的唯一子节点。

<div class="contain">
  <div>
    <p>Hello World</p>
    <p>some more children</p>
  </div>
</div>

div.contain div:only-child :first-child {
  color: red;
}

如果父元素包含多个具有相同标签的子节点，:only-child 将无法作为选择器使用。 例如…

<div class="contain">
  <div>
    <h1>Div Child 1</h1>
    <p>paragraph1</p>
    <p>paragraph2</p>
  </div>

  <div>
    <h1>Div Child 2</h1>
    <p>paragraph1</p>
    <p>paragraph2</p>
  </div>

  <div>
    <h1>Div Child 3</h1>
    <p>paragraph1</p>
    <p>paragraph2</p>
  </div>
</div>

div.contain div:only-child {
  color: red;
}

这将导致没有 div 继承红色，因为父节点包含多个子节点（3 个未命名的 div）。

相关属性

• :only-of-type
• :last-of-type
• :nth-child
• :nth-last-child

其他资源

• W3C CSS 2.1 规范
• W3C CSS 第 3 级选择器规范
• MDN 文档
• Web 平台文档
• sitepoint

浏览器支持