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>

全栈前端 / CSS教程 :



























Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.