CSS选择器:last-of-type失效的常见原因及解决方法
在CSS样式中，:first-of-type和:last-of-type选择器常用于选中同类型元素中的第一个和最后一个。然而，:last-of-type有时会失效，这通常是因为对选择器工作机制的理解不够透彻。
本文将通过一个案例分析:last-of-type失效的原因。
问题代码：
立即学习“前端免费学习笔记（深入）”；
HTML结构：
1 2 3 4 5 就是不一样CSS样式：
.children { display: inline-block; width: 50px; height: 50px; background: gray; &:first-of-type { background: pink; } &:last-of-type { background: yellow; }}预期结果是第一个.children元素背景色为粉色，最后一个为黄色。但实际只有第一个元素背景色改变。
原因分析：
Shakker
多功能AI图像生成和编辑平台
103 查看详情
: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结构是最根本的解决方法，可以避免选择器失效的问题。
以上就是CSS选择器:last-of-type失效了，是什么原因？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1135231.html
微信扫一扫 
支付宝扫一扫 
