:not(:last-child) 是加分割线最稳妥的选择，因其仅依据 dom 子节点实际位置匹配，不依赖父容器结构清洁度，也不受嵌套元素干扰，兼容性与可靠性优于 :last-of-type 或星号选择器。
为什么 :not(:last-child) 是加分割线最稳妥的选择
直接用 :last-child 反选比给每个元素加边框再覆盖掉最后一个更可靠——它不依赖父容器结构是否“干净”，也不怕列表项里嵌套了其他块级元素干扰伪类匹配。比如 li 里有 div 或 p，:last-of-type 就可能失效，但 :not(:last-child) 只看 DOM 树中的实际子节点位置，只要它是父元素的最后一个子节点，就不会被加上边框。
:not(:last-child) 的典型写法和常见翻车点
最常用的是给列表项统一加底部边框，然后用伪类排除最后一个：
li {
border-bottom: 1px solid #ddd;
}
li:not(:last-child) {
border-bottom: 1px solid #ddd;
}
但这里有个隐蔽坑：如果 li 是空的，或者只含纯文本（无换行），:last-child 依然生效；但如果父元素末尾有空白文本节点（比如换行缩进），某些旧版 Safari 会把那个空白节点当作 :last-child，导致最后一个 li 意外被选中。解决方案是确保 HTML 中 li 之间无换行，或改用 Flex/Grid 布局让语义更清晰。
- 推荐写法：
li:not(:last-child) { margin-bottom: 0.75rem; }（用间距替代边框，兼容性更好） - 慎用：
ul > *:not(:last-child)——星号选择器会命中所有子节点，包括注释或文本节点，行为不可控 - 注意：IE8 不支持
:not()，如需兼容，得回退到 JS 动态加 class 或用:first-child ~ li
在 Flex 容器中用 :not(:last-child) 加分隔线更稳
Flex 布局下，子元素顺序由 DOM 决定，不受 CSS 排序影响，:last-child 行为更可预测。配合 gap 属性还能避免边框重叠问题：
.list {
display: flex;
flex-direction: column;
gap: 1px;
}
.list > * {
background: white;
}
此时其实不需要 :not(:last-child) ——gap 自动处理间隔。但如果你坚持用边框（比如要实现虚线/双线等 gap 不支持的样式），仍建议保持 :not(:last-child) 写法，因为 Flex 不改变 DOM 子节点关系。
-
gap在 Firefox 63+、Chrome 84+ 支持良好，但老版本 Android WebView 仍有问题 - 若用
border-right做垂直分隔，记得加flex-wrap: wrap并限制最大宽度，否则最后一行元素可能漏掉右边框
遇到嵌套列表时怎么避免子列表项也被加线
如果 ul 里有子 ul，而你只希望顶层 li 有分隔线，必须限定层级：
ul > li:not(:last-child) {
border-bottom: 1px solid #eee;
}
不加 > 就会穿透到所有后代 li，包括子菜单项。另外，如果用 BEM 类名，比如 .menu__item，建议直接写成 .menu__item:not(:last-child)，比依赖 DOM 结构更可控。
- 避免写
li:not(:last-child) > ul——这会选中倒数第二个li里的子列表，逻辑反直觉 - 如果子列表需要不同样式，最好单独定义，比如
.menu__item--has-submenu:not(:last-child)
真正麻烦的不是写法本身，而是当列表内容动态渲染（比如 Vue/React 的 v-for 或 map()）、或服务端注入了不可控的空白节点时，:last-child 的判定边界会悄悄偏移。这时候与其死磕 CSS，不如在数据层保证数组长度可预期，或加个 data-last 属性由 JS 控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
