:not(:last-child) 可为同级直系子元素添加边框，但仅作用于当前元素且依赖 dom 结构；失效常因权重不足、flex/grid 布局干扰、嵌套层级或 css 覆盖；搭配 :first-child 更安全，::after 伪元素则适用于需精确定位或样式的场景。
直接用 :not(:last-child) 加边框就行，但得注意它只作用于「当前元素」，不是自动给所有前面的元素加线——这点很多人误以为是“智能排除最后一项”，其实只是逐个判断每个元素是否满足条件。
为什么 :not(:last-child) 有时不生效？
常见原因是选择器权重或 DOM 结构干扰。比如列表项是 <li>，但父容器用了 display: flex 或 display: grid，而子元素又设置了 margin 覆盖了边框；或者用了嵌套结构（如 <li><div>...</div></li>），结果你对 <div> 写了 <code>:not(:last-child)，但 :last-child 是相对于 <li> 的，不是 <div>。<ul>
<li>确保目标元素是同级、直系子元素，且能被 <code>:last-child 正确识别
ul li:not(:last-child) div 很容易失效border: none）覆盖，可用浏览器开发者工具验证计算样式
:not(:last-child) 和 :first-child 搭配用更安全
单靠 :not(:last-child) 在某些场景下会漏掉首项分隔（比如想实现“每两项之间一条线”），此时配合 :first-child 显式排除首项更可控。
li:not(:last-child) {
border-bottom: 1px solid #eee;
}
/* 如果希望第一条不带线，可再加 */
li:first-child {
border-bottom: none;
}
这样写逻辑更清晰：先统一加底边框，再单独抹掉第一个——比试图用 :not(:first-child):not(:last-child) 更易读、兼容性更好（后者在旧版 Safari 中偶有解析异常）。
替代方案：用 ::after 伪元素控制分隔线位置
当需要精确控制分隔线长度、颜色渐变或仅在文字右侧显示时，:not(:last-child) 加边框就力不从心了。这时改用 ::after 更灵活：
li:not(:last-child)::after {
content: "";
display: block;
height: 1px;
background: #ddd;
margin: 8px 0;
}
好处是：
- 分隔线不占布局空间（除非设了
margin） - 可以自由定位（比如右对齐、缩进 20px）
- 避免边框叠加导致的双线问题（多个方向边框同时存在时）
- 支持动画、渐变等
background特性
真正容易被忽略的是：伪类匹配依赖 DOM 树结构，而不是渲染后的视觉顺序。如果列表是 JS 动态插入、或用了 order 属性重排，:last-child 仍按 HTML 顺序判断，不是按屏幕上看到的最后一个。
