E:first-of-type

語法:

E:first-of-type { sRules }

說明:

相符父元素下第一個類型為E的子元素。

需要注意3個要點:

  • 首先,該選擇符要相符的是類型為E的子元素,這意味著E元素必須作為某個元素的子元素存在(E元素的父元素最高是html,也就是說E元素本身最高只能是body,這表示任何非html的元素都符合這個約束,因為html元素是根元素。)
  • 其次,該選擇符要相符的是父元素第一個類型為E的子元素,這意味著被命中的元素不一定是父元素的第一個子元素(因為排在父元素首位的不一定是E元素,E元素可能在子元素列表中的任何位置)。來看下面這個例子:

    HTML 程式碼:

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

    如上HTML,我們要命中父元素 .demo 的第一個 span 子元素,CSS 程式碼如下:

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

    此時 .demo 的第1個元素並沒有被相符到,而是相符到了第3個子元素,因為第3個子元素正好是 .demo 的第1個span子元素

  • 再次,只能相符與E元素同級的元素,即:E元素的兄弟元素

    來看下面這個例子:

    HTML示例程式碼:

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

    如上HTML,如果我想相符其中的第1個span,程式碼如下:

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

    結果span1和span2都會被命中,因為span1和span2分屬不同的父元素,並且都是其父元素的首個span元素,所以都會被命中

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
8.0 2.0+ 4.0+ 3.1+ 3.5+ 3.2+ 2.1+ 18.0+
IE9.0+

示例: