CSS如何选中最后一个元素｜控制列表尾部样式

li {
  border-bottom: 1px solid #ccc;
}

li:last-child {
  border-bottom: none;
}

这样，“项目三”就不会显示底部边框，视觉上更干净。

注意事项与兼容性

使用 :last-child 时需注意以下几点：

• 必须是“最后一个子元素”，中间不能有其他标签（如注释、文本节点等干扰）
• 若最后一个子元素不是目标类型，则不会匹配（比如最后一个子元素是 div，而你写的是 p:last-child，就不会生效）
• 支持所有现代浏览器，IE9 及以上也支持，兼容性良好

与其他选择器对比

相比 :last-of-type，:last-child 更严格地依据顺序而非类型。例如：

div:last-child

表示：只有当最后一个子元素是 div 时才生效。而 div:last-of-type 表示：所有 div 子元素中的最后一个，即使后面还有其他类型的元素。

基本上就这些。合理使用 :last-child 能有效简化 HTML 结构，提升样式的可维护性。不复杂但容易忽略细节，掌握它对日常开发很有帮助。

今天关于《CSS如何选中最后一个元素｜控制列表尾部样式》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！