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元素背景色为粉色，最后一个为黄色。但实际只有第一个元素背景色改变。

原因分析：

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

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

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

解决方法：

1. 使用:nth-last-of-type(1): 此选择器选择父元素中同类型元素的最后一个，无论其后是否有其他类型的元素。

2. 使用:last-child: 如果只需要选择父元素下的最后一个子元素，不管其类型，可以使用:last-child。 需要注意的是，:last-child选择的是父元素的最后一个子元素，而:last-of-type选择的是父元素中最后一个同类型元素。

3. 结构调整: 在实际开发中，尤其是在列表组件中添加“加载更多”功能时，容易出现此问题。 解决方法是为列表项添加一个父级容器，将列表项与其他元素隔离开来，确保最后一个列表项确实是其父容器中同类型元素的最后一个。

选择哪种方法取决于具体需求。如果需要精确选择最后一个同类型元素，则使用:nth-last-of-type(1)；如果只需要选择父元素的最后一个子元素，则使用:last-child；如果可能的话，调整HTML结构是最根本的解决方法，可以避免选择器失效的问题。

以上就是CSS选择器:last-of-type失效了，是什么原因？的详细内容，更多请关注知识资源分享宝库其它相关文章！