天天操天天干天天插/欧美胖肥婆性猛交视频在线观看/欧美多人乱大交xxxxx/国产精品一二三区在线观看 - 人人玩人人干

E:first-of-type

語(yǔ)法：

E:first-of-type { sRules }

說(shuō)明：

匹配父元素下第一個(gè)類型為E的子元素。

需要注意3個(gè)要點(diǎn)：

  • 首先，該選擇符要匹配的是類型為E的子元素，這意味著E元素必須作為某個(gè)元素的子元素存在（E元素的父元素最高是html，也就是說(shuō)E元素本身最高只能是body，這表示任何非html的元素都符合這個(gè)約束，因?yàn)閔tml元素是根元素。）

  • 其次，該選擇符要匹配的是父元素第一個(gè)類型為E的子元素，這意味著被命中的元素不一定是父元素的第一個(gè)子元素（因?yàn)榕旁诟冈厥孜坏牟灰欢ㄊ荅元素，E元素可能在子元素列表中的任何位置）。來(lái)看下面這個(gè)例子：

    HTML 代碼：

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

    如上HTML，我們要命中父元素 .demo 的第一個(gè) span 子元素，CSS 代碼如下：

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

    此時(shí) .demo 的第1個(gè)元素并沒(méi)有被匹配到，而是匹配到了第3個(gè)子元素，因?yàn)榈?個(gè)子元素正好是 .demo 的第1個(gè)span子元素

  • 再次，只能匹配與E元素同級(jí)的元素，即：E元素的兄弟元素

    來(lái)看下面這個(gè)例子：

    HTML示例代碼：

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

    如上HTML，如果我想匹配其中的第1個(gè)span，代碼如下：

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

    結(jié)果span1和span2都會(huì)被命中，因?yàn)閟pan1和span2分屬不同的父元素，并且都是其父元素的首個(gè)span元素，所以都會(huì)被命中

兼容性：

  • 淺綠 = 支持
  • 紅色 = 不支持
  • 粉色 = 部分支持
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+

示例：