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选择器并非简单地选择最后一个元素，它需要同时满足两个条件：
- 元素本身必须是
.children类。 - 它必须是其父元素中同类型元素的最后一个。
在上述HTML中，虽然最后一个.children元素满足条件1，但它并非其父元素（.parent）中同类型元素的最后一个，因为后面还有一个.special元素。因此，:last-of-type失效。
解决方法：
-
使用
:nth-last-of-type(1): 此选择器选择父元素中同类型元素的最后一个，无论其后是否有其他类型的元素。 -
使用
:last-child: 如果只需要选择父元素下的最后一个子元素，不管其类型，可以使用:last-child。 需要注意的是，:last-child选择的是父元素的最后一个子元素，而:last-of-type选择的是父元素中最后一个同类型元素。 -
结构调整: 在实际开发中，尤其是在列表组件中添加“加载更多”功能时，容易出现此问题。 解决方法是为列表项添加一个父级容器，将列表项与其他元素隔离开来，确保最后一个列表项确实是其父容器中同类型元素的最后一个。
选择哪种方法取决于具体需求。如果需要精确选择最后一个同类型元素，则使用:nth-last-of-type(1)；如果只需要选择父元素的最后一个子元素，则使用:last-child；如果可能的话，调整HTML结构是最根本的解决方法，可以避免选择器失效的问题。
