用 :last-child 清除最后一项的 border-bottom 最省事可靠，但需确保 flex-direction: column 且 dom 末项即视觉末项；避免用 margin/padding 混淆留白逻辑，优先用 margin-bottom 控制间距、padding-bottom 配合边框。
用 border-bottom 给 flex 列表加线，但最后一项不能有线
直接给每个列表项加 border-bottom 最省事，但末尾多出一条线是高频视觉 bug。别用 JS 删 class，也别手动给最后一项加 border: none——维护成本高，响应式下容易失效。
正确做法是利用 :last-child 选择器反向清除：
li {
border-bottom: 1px solid #e0e0e0;
}
li:last-child {
border-bottom: none;
}
注意：这个方案依赖 DOM 结构中最后一项确实是逻辑上的“末尾”。如果列表由 JS 动态渲染、或存在隐藏项（display: none）、或用了 flex-wrap 多行布局，:last-child 仍选中 HTML 中最后一个元素，而非视觉最后一行的末尾项——这时候线会错位。
flex 容器设 flex-direction: column 时，:last-child 依然可靠
垂直排列的弹性列表里，DOM 顺序和视觉顺序一致，:last-child 能准确命中真正要收尾的位置。这是它比 :nth-last-child(1) 更直白、比 JS 计算更轻量的原因。
但要注意两点：
-
flex-direction: column是前提；换成row或row-reverse后，:last-child就不再对应“最右/最左”了 - 如果列表项本身是
display: flex且内部有子元素干扰，确保li是直接子元素，避免被包裹层截断选择器链
想让分隔线对齐文字基线？别碰 padding-bottom 硬调
常见错误是加了 border-bottom 后发现线贴得太近，于是给每项加 padding-bottom: 8px 拉开距离——这会导致最后一项底部空白多余，破坏节奏感。
更干净的解法是统一用 margin-bottom 控制项间距，再把边框“塞进去”：
li {
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #e0e0e0;
}
li:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
这样所有项的视觉高度一致，最后一项也不突兀。关键点在于：边框属于盒模型的 border 区域，不占 layout 高度，而 margin 和 padding 才决定留白。
兼容性没问题，但 Safari 对 :last-child 的解析曾有小偏差
现代浏览器（Chrome 45+、Firefox 35+、Safari 9.1+、Edge 12+）都稳定支持 :last-child。老版 Safari（≤9.0）在某些嵌套 flex 场景下会漏选，但这类环境现在基本可忽略。
如果你必须兼容 iOS 9 以下设备，退路不是放弃 :last-child，而是加一层保险：
li {
border-bottom: 1px solid #e0e0e0;
}
li:last-child,
li:last-of-type {
border-bottom: none;
}
:last-of-type 在纯 li 列表中效果相同，且兼容性略好一点。不过真遇到极端 case，说明结构本身可能需要重构——比如把列表项包装进 <ol></ol> 或 <ul></ul>，而不是裸写一堆 div。
真正容易被忽略的是：当列表内容高度不一致（比如有的项含图片、有的纯文本），border-bottom 位置会随内容撑开而浮动，看起来像没对齐。这时候得固定项高，或改用伪元素 + 绝对定位画线——但那就不是 border 能解决的事了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
