We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

概述

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

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

语法

element:only-of-type { style properties }

示例

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

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

结果

规范

Specification Status Comment
Selectors Level 4
:only-of-type
Working Draft No change.
Selectors Level 3
:only-of-type
Recommendation Initial definition.

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 3.5 (1.9.1) 9.0 9.5 3.2
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 1.0 (1.9.1) 9.0 10.0 3.2

参见

文档标签和贡献者

标签: 
此页面的贡献者: maoyumaoxun, FredWe
最后编辑者: maoyumaoxun,