最直接、语义最清晰的解法是 li:not(:last-child) { border-bottom: 1px solid #eee; }，它精准排除最后一个 li，兼容 IE9+，不误伤嵌套结构，且动态增删时自动生效。
用 :not(:last-child) 选中前面所有 li
这是最直接、语义最清晰的解法。浏览器对 :not(:last-child) 支持良好（IE9+），它精准表达“除了最后一个，其余都加线”，不会误伤嵌套结构或受伪元素干扰。
常见错误是写成 :nth-child(n-1) 或 :first-child ~ li，前者在有其他兄弟元素时失效，后者无法处理动态插入/删除的列表项。
li:not(:last-child) { border-bottom: 1px solid #eee; }- 如果列表是响应式折叠的，记得检查移动端是否仍需分隔线——有时最后一条在视觉上变成“第一行”，但 DOM 顺序没变，
:last-child依然生效 - 避免在
li上同时设margin-bottom和border-bottom，容易造成线距不一致；统一用padding-bottom控制间距更稳妥
用 li + li 隔代选择器给后续所有项加线
这个方案兼容性更强（IE7+），原理是“只要前面有个 li，当前这个就加线”，所以第一个 li 不匹配，后面每个都匹配。
适合老项目或需要兼容 IE8 的场景，但要注意：如果 li 中间穿插了其他元素（比如注释、div 分隔块），+ 就会断掉，后续 li 不再被选中。
立即学习“前端免费学习笔记（深入）”；
-
li + li { border-top: 1px solid #eee; }—— 更推荐用border-top，避免和父容器底边框重叠 - 若列表项高度不固定，
border-top比border-bottom更易对齐视觉重心 - 不要混用
li + li和:not(:last-child)，CSS 层叠可能引发意外覆盖
JavaScript 动态控制时别忘了更新 last-child 状态
当用 JS 插入、删除或排序 li 后，:last-child 会自动更新，但如果你手动加了类名（比如 no-border），就必须同步维护——否则新末尾项没线，旧末尾项还挂着线。
- 优先用纯 CSS 方案，避免 JS 干预样式逻辑
- 非要用 JS 控制时，改用
document.querySelectorAll('li')获取实时集合，再给[0..length-2]批量加类 - Vue/React 中，别在
v-for或map()里硬写index !== list.length - 1判定——这和 CSS 的:last-child行为不完全等价（比如 key 复用、条件渲染跳过）
注意 border-bottom 在 flex / grid 布局中的表现差异
如果 ul 是 display: flex 或 grid，子项 li 的 border-bottom 仍正常渲染，但可能因对齐方式（如 align-items: center）导致线条看起来偏高或截断。
- flex 容器中，给
li加align-self: stretch可确保边框撑满行高 - grid 布局下，
border-bottom会画在单元格底部，但如果设置了grid-row-gap，线和间隙之间会有空白，此时不如用grid-row-gap配合背景色模拟分隔效果 - 所有方案里，
box-sizing: border-box必须确保已设，否则border-bottom会让高度超出预期
真正麻烦的是列表项本身带内边距、字体大小不一，或者用了 line-height 调整垂直居中——这时候 border-bottom 的位置会飘，得靠 calc() 或伪元素微调，但那就不是“自带分隔线”该解决的事了。
