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+

示例: