li:not(:last-child)是最直接可靠的写法，能精准排除最后一个li边框，语义清晰、意图明确，且在混有其他节点时比:last-child更稳健；ul>li:not(:last-child)适用于纯列表，:not(:last-of-type)适用于混排场景。
li:not(:last-child) 是最直接、最可靠的写法，能精准排除最后一个 li 的边框，前提是父容器下子元素结构干净、顺序可信。
为什么不用 li:last-child 单独覆盖？
单独写 li:last-child { border-bottom: none; } 看似等价，但本质是“先全加再清除”，容易被后续样式覆盖或干扰；而 li:not(:last-child) 是“只给该加的加”，语义更清晰、意图更明确。更重要的是：如果父容器末尾混有 div 或注释节点，:last-child 会指向那个节点，导致所有 li 都命中边框规则——此时 li:not(:last-child) 仍只作用于 li 元素本身，再从中排除 DOM 中真正的最后一个 li（不是最后一个子元素），反而更稳健。
ul > li:not(:last-child) 和 li:not(:last-of-type) 怎么选？
两者适用场景不同：
-
ul > li:not(:last-child)：适用于纯列表结构（ul下只有li），且你希望严格按 DOM 顺序排除最后一个子元素 -
li:not(:last-of-type)：适用于混排场景（比如article里p、div、li交错），它只看同类型标签中的最后一个li，不关心前面有没有其他元素 - 注意：
:last-of-type在 IE11 及更早版本中支持有限，若需兼容，优先用:last-child+ 子选择器限定
哪些情况会让 :not(:last-child) 失效？
它依赖 DOM 结构顺序，以下三类情况容易翻车：
- HTML 中
li之间存在换行或空格——浏览器会把空白文本节点当作子节点，导致真正的最后一个li不是:last-child；解决办法：写成ul > li:not(:last-child)并压缩 HTML 或改用:last-of-type - 用了
flex-direction: column-reverse或grid-auto-flow: dense等改变视觉顺序的布局——:last-child仍按源码位置判断，不会随渲染重排变化 - 框架条件渲染（如 Vue 的
v-if或 React 的key复用）导致 DOM 节点动态增删——此时 JS 层面的list.length - 1和 CSS 的:last-child行为可能不一致
border-bottom 还是 border-top？哪个更稳？
用 border-bottom 加 li:not(:last-child) 最常见，但容易在缩放或 subpixel 渲染下产生底部半像素空白；更稳妥的做法是统一用 border-top，再移除首项：
li {
border-top: 1px solid #eee;
}
li:first-child {
border-top: none;
}
如果坚持用 border-bottom，务必配合 box-sizing: border-box 和固定高度/行高控制，否则列表整体高度可能因边框叠加而抖动。移动端还要注意：纯 border 区域不响应点击，建议用 padding-bottom + margin-bottom 扩展触控区域，再把边框作为纯视觉装饰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
