:only-of-type
版本:CSS3
CSS伪类:only-of-type代表了任意一个元素,这个元素没有其他相同类型的兄弟元素。
语法:
E :only-of-type{sRules}
匹配同类型中的唯一的一个同级兄弟元素E
:only-of-type代表了任意一个元素,这个元素没有其他相同类型的兄弟元素。- 根据原来的定义,被选择的元素必须具有父元素。直到 Selectors Level 4 开始,这个要求就不是必须的了。
- E元素是某个元素的子元素,E的父元素最高是
<html>,即E可以是<html>的子元素,也就是说E可以是<body> - 该选择符总是能命中父元素的唯一同类型子元素E,不论该元素的位置
浏览器支持
![]() | ![]() | ![]() | ![]() | ![]() |
IE9+以及新版浏览器都支持:only-of-type | ||||
例子
//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;}
i am `div`#1.
i am the only `p` among my siblings.
i am `div`#2.
i am `div`#3.i am the only `i` child.i am `em`#1.i am `em`#2.
ain>
<style>
p:only-of-type{background-color:#66cdcc;color:red;}
</style>
<div>
<p>这是一个段落。</p>
</div>
<div>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
</div>
这是一个段落。
这是一个段落。
这是一个段落。





