E:last-of-type

语法:

E:last-of-type { sRules }

说明:

匹配父元素下的所有E子元素中的倒数第一个。

需要注意3个要点:

  • 首先,因为匹配的是父元素的子元素,这意味着E元素必须作为某个元素的子元素存在(E元素的父元素最高是html,也就是说E元素最高是body,这表示任何非html的元素都符合这个约束,因为html元素是根元素。)
  • 其次,匹配的是父元素的第一个E子元素(要注意:被命中的不一定是父元素的第一个子元素,因为排在子元素首位的不一定是E元素,它可能在子元素列表中的任何位置)

    来看下面这个例子:

    HTML示例代码:

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

    如上HTML,假设要命中第1个span元素,代码如下:

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

    此时 .demo 的第3个子元素会被命中,因为 .demo 的第3个子元素正好是第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
6.0-8.0 2.0+ 4.0+ 3.1+ 3.5+ 3.2+ 2.1+ 18.0+
IE9.0+

示例: