CSS选择器:last-of-type失效了，是什么原因？-css教程-PHP中文网

CSS选择器:last-of-type失效了，是什么原因？

碧海醫心

发布： 2025-02-27 08:52:01

原创

583人浏览过

css选择器:last-of-type失效了，是什么原因？

CSS选择器:last-of-type失效的常见原因及解决方法

在CSS样式中，:first-of-type和:last-of-type选择器常用于选中同类型元素中的第一个和最后一个。然而，:last-of-type有时会失效，这通常是因为对选择器工作机制的理解不够透彻。

本文将通过一个案例分析:last-of-type失效的原因。

问题代码：

立即学习“前端免费学习笔记（深入）”；

HTML结构：

<div class="parent">
  <div class="children">1</div>
  <div class="children">2</div>
  <div class="children">3</div>
  <div class="children">4</div>
  <div class="children">5</div>
  <div class="special">就是不一样</div>
</div>

登录后复制

CSS样式：

.children {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: gray;
    &:first-of-type {
        background: pink;
    }
    &:last-of-type {
        background: yellow;
    }
}

登录后复制

预期结果是第一个.children元素背景色为粉色，最后一个为黄色。但实际只有第一个元素背景色改变。

原因分析：

AI Word

一款强大的 AI 智能内容创作平台，致力于帮助用户高效生成高质量、原创且符合 SEO 规范的各类文章。

226

查看详情

:last-of-type选择器并非简单地选择最后一个元素，它需要同时满足两个条件：

元素本身必须是.children类。
它必须是其父元素中同类型元素的最后一个。

在上述HTML中，虽然最后一个.children元素满足条件1，但它并非其父元素（.parent）中同类型元素的最后一个，因为后面还有一个.special元素。因此，:last-of-type失效。

解决方法：

使用:nth-last-of-type(1): 此选择器选择父元素中同类型元素的最后一个，无论其后是否有其他类型的元素。
使用:last-child: 如果只需要选择父元素下的最后一个子元素，不管其类型，可以使用:last-child。需要注意的是，:last-child选择的是父元素的最后一个子元素，而:last-of-type选择的是父元素中最后一个同类型元素。
结构调整: 在实际开发中，尤其是在列表组件中添加“加载更多”功能时，容易出现此问题。解决方法是为列表项添加一个父级容器，将列表项与其他元素隔离开来，确保最后一个列表项确实是其父容器中同类型元素的最后一个。