E:only-of-type

语法：

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+

示例：