CSS列表分割线技巧：.not(:last-child)应用

border-bottom 是最常用也最容易翻车的方式

给每个 li 加 border-bottom: 1px solid #eee，再用 :not(:last-child) 移除最后一项的底边——看似合理，但实际会导致容器底部多出半像素空白（尤其在缩放或 subpixel 渲染下）。更稳妥的做法是统一加 border-top，然后移除第一项的上边框：

li {
  border-top: 1px solid #eee;
}
li:first-child {
  border-top: none;
}

或者坚持用 border-bottom，但配合 box-sizing: border-box 和明确高度控制，避免布局抖动。

遇到 Flex/Grid 布局时，:not(:last-child) 仍有效但需注意渲染顺序

Flex 容器中 li 的 DOM 顺序和视觉顺序一致，:last-child 依然指最后一个子节点，没问题。但如果用了 flex-direction: column-reverse，视觉上最后一个其实是 DOM 中第一个——此时 :not(:last-child) 会错配。

• 解决方案：改用 order 属性控制逻辑顺序，而非靠 flex-direction 反转视觉
• 或改用伪元素 + margin：给每个 li::after 设 content: "" 和 margin-bottom: 1rem，再对 li:last-child::after 设 display: none
• Grid 场景同理，只要不显式用 grid-auto-flow: dense 配合 grid-row 跳序，:last-child 就可信

移动端点击区域变小？别让分割线吃掉触控空间

在 iOS Safari 或 Android Chrome 上，如果分割线是纯 border，且 li 内容行高紧凑，手指点在分割线上可能无法触发点击——因为 border 区域默认不响应事件，且没有额外 padding。

安全做法是把分割线“挪”到内边距里：

li {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
li:not(:last-child) {
  border-bottom: 1px solid #eee;
}

这样分割线实际是视觉装饰，真实交互区域由 padding 和 margin 保障。如果必须用 border 控制间距，至少确保 li 有最小 min-height 或 line-height，防止文字塌陷到 border 区域。

最常被忽略的是：当列表项包含图片或图标时，vertical-align 默认为 baseline，会导致文字和 border 对不齐——加一句 vertical-align: top 或统一设 display: flex 就能解决。

终于介绍完啦！小伙伴们，这篇关于《CSS列表分割线技巧：.not(:last-child)应用》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！