CSS :first-of-type选择器实例详解

:first-of-type选择器

CSS的伪类选择器:first-of-type到底是怎么匹配获取HTML元素的呢？鄙人理解的是，:first-of-type伪类选择器可以根据伪类选择器前方的选择器选择的特定元素的所构成的元素集合下的第一个该类型元素的元素。可能有点绕，看看下面这个语法、解释和实例可能会更具象化一些（个人见解，仅供参考）：

:first-of-type选择器语法

A:first-of-type { 设置样式 }

解析：A:first-of-type选择器选择的是A选择器选择的元素构成的集合下的所有A类型的元素的第一个元素。

:first-of-type选择器实例代码，及在线编辑器

<div>
  <p class='e1'>这是div的第一个p子元素</p>
  <span class='e2'>这是div的第一个span子元素</span>
  <p class='e1'>这是div的第二个p子元素</p>
  <span class='e2'>这是div的第二个span子元素</span>
</div>

<style>
  .e1:first-of-type{color:skyblue;}
  .e2:first-of-type{color:blue;}
</style>

实例代码解析

如上代码，.e1:first-of-type选择器选择的是通过类.e1选择器选择的所有类属性为e1的元素构成了集合中的第一个类属性为.e1的元素。

hot：热门