使用:not(:last-child)可精准排除最后一个元素，解决边框重叠与多余间距问题。1. 设置右边框分隔时，仅非末尾元素显示边框；2. 控制margin-right时避免末项空白；3. 结合flex布局实现边框重叠与紧凑排列，提升列表、按钮组等布局的整洁性与视觉一致性。
在CSS中，想要为元素设置间隔样式（比如横向排列的标签、按钮或卡片）时，常会遇到边框重叠或末尾多余间距的问题。:not(:last-child) 是一个非常实用的选择器组合，能精准排除最后一个元素，从而灵活控制边框、外边距等样式。
使用 :not(:last-child) 控制右边框
当多个元素水平排列并希望每个元素之间有分隔线时，常见做法是给每个元素添加右边框。但最后一个元素不需要右边框，否则视觉上多余。
通过 :not(:last-child) 可以轻松实现：
.item:not(:last-child) {border-right: 1px solid #ccc;
}
这样只有非最后一个子元素才会显示右边框，形成自然的分隔效果，且末尾无多余线条。
立即学习“前端免费学习笔记（深入）”；
控制元素间的水平间距
使用 margin 实现元素间间距时，如果每个元素都设置 margin-right，最后一个元素会多出不必要的空白，可能影响布局对齐。
解决方案同样是排除最后一个元素：
.item:not(:last-child) {
margin-right: 16px;
}
此时所有元素向右留出间距，唯独最后一个“收尾干净”，整体对齐更整洁，尤其适合按钮组、标签组等场景。
结合 flex 布局的实用技巧
在 Flex 容器中，子项自动排列，但仍可使用该伪类精细化控制。
例如，实现等间距分布的同时保留边框分隔：
.container {display: flex;
}
.item {
padding: 8px 12px;
border: 1px solid #ddd;
}
.item:not(:last-child) {
margin-right: -1px; /* 重叠边框，避免双线 */
border-right: none; /* 或统一由前一个控制 */
}
这种写法可以实现边框合并的视觉效果，同时保持间距紧凑。
基本上就这些。合理使用 :not(:last-child) 能让你的样式更简洁、布局更可控，特别适合处理列表、工具栏、导航项等重复结构的视觉细节。不复杂但容易忽略。
