CSS :last-of-type()选择器,实例在线编辑
:last-of-type()选择器
:last-of-type()选择器为CSS的伪类选择器,(如下内容,仅为个人理解,仅供参考)该选择器匹配获取元素分两个步骤,第一步是根据伪类选择器前方的选择器选择元素,并将这些匹配选择到的元素构成一个元素集合;第二步,通过完整的伪类选择器匹配选择该集合下的第一个元素。这着实有点绕,可以参考下面的语法、相关解释和实例,就可能会更具象化一些:
:last-of-type()选择器语法
B:last-of-type { 设置样式 }
解析:B:last-of-type选择器选择的是B选择器选择的元素构成的集合下的第一个元素。
:last-of-type选择器实例代码,及在线编辑器
<div>
<p class='e1'>这是第一个p元素</p>
<span class='e2'>这是第一个span元素</span>
<p class='e1'>这是第二个p元素</p>
<span class='e2'>这是第二个span元素</span>
</div>
<style>
.e1:last-of-type{color:skyblue;}
.e2:last-of-type{color:blue;}
</style>