E:only-of-type

  • 版本:CSS3

语法:

E:only-of-type { sRules }

说明:

匹配父元素的所有子元素中唯一的那个子元素E。

需要注意2个要点:

  • 首先,因为匹配的是父元素的子元素,这意味着E元素必须作为某个元素的子元素存在(E元素的父元素最高是html,也就是说E元素最高是body,这表示任何非html的元素都符合这个约束,因为html元素是根元素)。
  • 其次,父元素可以有多个子元素,但其中的子元素E必须是唯一的,不能出现多个。

    来看下面的例子:

    有如下一段CSS:

    .demo span:only-of-type { color: #f00; }

    该选择器表示要匹配 .demo 下唯一的span元素

    示例一,假设有如下HTML:

    <div class="demo"> <span>span1</span> </div>

    毫无疑问,因为span1是 .demo 唯一的子元素,所以span1会被命中

    示例二,假设有如下HTML:

    <div class="demo"> <p>p1</p> <span>span1</span> </div>

    可以看到span1也会被命中,虽然此例中.demo有2个子元素,但span1是.demo唯一的span子元素

    示例三,假设有如下HTML:

    <div class="demo"> <p>p1</p> <span>span1</span> <span>span2</span> </div>

    此时span将不会被命中,因为.demo有2个span子元素,不满足唯一性要求。

兼容性:

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
6.0-8.0 2.0+ 4.0+ 3.1+ 3.5+ 3.2+ 2.1+ 18.0+
IE9.0+

示例:

关注编程学问公众号