E:first-of-type

E:first-of-type { sRules }

需要注意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元素，所以都会被命中

• 浅绿 = 支持
• 红色 = 不支持
• 粉色 = 部分支持