使用:last-child可避免列表最后一项出现多余边框。当为li设置border-bottom时，末项也会显示边框，破坏视觉整洁；通过li:last-child{border-bottom:none}可精准去除末项边框，常用于导航、评论列表等需分隔但末尾无需线条的场景，使界面更精致。
在使用CSS设计列表或布局时，:last-child 伪类常用于选中父元素中的最后一个子元素。它在处理边框样式时特别有用，比如避免列表最后一项下方出现多余的边框线。
为什么需要 :last-child 处理边框？
当为列表项（如 <li>）设置下边框时，最后一项也会带边框，可能导致视觉上多出一条不需要的线条。
例如：
li { border-bottom: 1px solid #ccc; }这时每个 <li> 都有下边框，包括最后一个，显得不整洁。
立即学习“前端免费学习笔记（深入）”；
使用 :last-child 去除最后边框
通过组合 :last-child，可以专门针对最后一个元素取消边框：
li { border-bottom: 1px solid #ccc; }li:last-child { border-bottom: none; }
这样前面的项目保留分隔线，最后一项则没有多余边框，视觉更清爽。
适用场景举例
- 导航菜单项之间的分隔线
- 评论列表每条之间的分割线
- 设置卡片列表的上下间距边框
只要涉及“除了最后一个都加边框”的需求，:last-child 都是简洁有效的解决方案。
基本上就这些，合理使用 :last-child 能让界面细节更精致。
