:only-child

Baseline 广泛可用 *

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

* 此特性的某些部分可能存在不同级别的支持。

:only-child CSS 伪类表示没有同级元素的元素。这与 :first-child:last-child 或 :nth-child(1):nth-last-child(1) 相同，但特异度较低。

试一试

li:only-child {
  color: fuchsia;
}

b:only-child {
  text-decoration: underline;
}

<p>Stars expected to attend:</p>
<ol>
  <li>Robert Downey, Jr.</li>
</ol>

<p>Stars yet to confirm:</p>
<ol>
  <li>Scarlett Johansson</li>
  <li>Samuel L. Jackson</li>
  <li>Chris Pratt</li>
</ol>

<p>The ceremony is going to be held in <b>The Dolby Theatre</b>.</p>

语法

css

:only-child {
  /* ... */
}

示例

基本示例

HTML

html

<div>
  <div>I am an only child.</div>
</div>

<div>
  <div>I am the 1st sibling.</div>
  <div>I am the 2nd sibling.</div>
  <div>
    I am the 3rd sibling,
    <div>but this is an only child.</div>
  </div>
</div>

CSS

css

div:only-child {
  color: red;
}

div {
  display: inline-block;
  margin: 6px;
  outline: 1px solid;
}

结果

列表示例

HTML

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

css

li li {
  list-style-type: disc;
}

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

结果

规范

规范
选择器 Level 4 # only-child-pseudo

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者在 2025 年 10 月 1 日修改。

在 GitHub 上查看此页面 • 报告此内容问题