此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

:only-child

CSS伪类:only-child 匹配没有任何兄弟元素的元素。等效的选择器还可以写成 :first-child:last-child或者:nth-child(1):nth-last-child(1),当然，前者的权重会低一点。

/* Selects each <p>, but only if it is the */
/* only child of its parent */
p:only-child {
  background-color: lime;
}

备注： 在起初定义，被选择的元素必须拥有一个父级元素。从 Selectors Level 4 开始，这不再是必须的了。

语法

Error: could not find syntax for this item

示例

基础示例

HTML

<main>
  <div>
    <i>I am a lonely only child.</i>
  </div>

  <div>
    <i>I have siblings.</i><br>
    <b>So do I!</b><br>
    <span>I also have siblings, <span>but this is an only child.</span></span>
  </div>
</main>

CSS

main :only-child {
  color: red;
}

结果

一个列表示例

HTML

<ol>
  <li>First
    <ul>
      <li>This list has just one element.</li>
    </ul>
  </li>
  <li>Second
    <ul>
      <li>This list has three elements.</li>
      <li>This list has three elements.</li>
      <li>This list has three elements.</li>
    </ul>
  </li>
</ol>

CSS

li li {
  list-style-type: disc;
}
li:only-child {
  color: red;
  list-style-type: square;
}

结果

规范

Specification
Unknown specification
# only-child-pseudo

浏览器兼容性

BCD tables only load in the browser

参见