在css中选择last-of-type元素方法

使用 :last-of-type 伪类可选择父元素中同类型标签的最后一个元素,例如 p:last-of-type 会选中最后一个段落标签,即使其后存在其他类型元素;在给定HTML中,p:last-of-type 将“段落3”设为红色,因其是所有 p 元素的最后一个;与 :last-child 不同,后者要求元素必须是父级的最后一个子节点且不区分类型,而 :nth-last-of-type(1) 则等效于 :last-of-type。

在CSS中选择最后一个特定类型的元素,可以使用 :last-of-type 伪类。它会选中父元素中同类型标签的最后一个元素。

基本语法

:last-of-type据元素的类型(即标签名)来匹配其在父容器中的最后一个实例。例如:

  • p:last-of-type 会选择其父元素中最后一个

    元素。
  • li:last-of-type 会选择列表中最后一个
  • 元素(即使后面还有其他类型的元素)。

实际示例

假设有如下HTML结构:

  

段落1

段落2

文字内容

段落3

使用以下CSS:

p:last-of-type {
  color: red;
}

结果是“段落3”变成红色,因为它是所有 p 标签中的最后一个。

与其他伪类的区别

:last-of-type 是按元素类型选择最后一个,不同于:

  • :last-child:必须是父元素的最后一个子元素,且是唯一一个类型无关的“末尾”元素。
  • :nth-last-of-type(n):更灵活的方式,比如 :nth-last-of-type(1) 等同于 :last-of-type

基本上就这些。使用 :last-of-type 能精准定位某类标签的末位元素,不依赖其是否为最后一个子节点,很实用。