: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>
这是一个段落。
这是一个段落。
这是一个段落。