:only-of-type

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

:only-of-type CSS 伪类代表了任意一个元素,这个元素没有其他相同类型的兄弟元素。

尝试一下

备注: 根据原来的定义,被选择的元素必须具有父元素。直到 Selectors Level 4 开始,这个要求就不是必须的了。

语法

css
:only-of-type {
  /* ... */
}

示例

为没有同类型兄弟元素的元素设置样式

HTML

html
<main>
  <div>I am `div` #1.</div>
  <p>I am the only `p` among my siblings.</p>
  <div>I am `div` #2.</div>
  <div>
    I am `div` #3.
    <i>I am the only `i` child.</i>
    <em>I am `em` #1.</em>
    <em>I am `em` #2.</em>
  </div>
</main>

CSS

css
main :only-of-type {
  color: red;
}

结果

规范

Specification
Selectors Level 4
# only-of-type-pseudo

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:only-of-type

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

参见