使用 :not(:last-child) 可精准排除最后一个子元素，常用于添加分隔线、间距控制及类名组合优化，提升样式灵活性与可维护性。
在CSS中，
:last-child和
:not()是两个非常实用的伪类选择器。结合使用它们，可以实现更精确、灵活的选择逻辑，尤其适用于动态结构或未知数量子元素的场景。下面介绍几种常见且实用的组合方式。
排除最后一个子元素
有时你希望对除最后一个子元素外的所有子元素应用样式。例如，在一个列表中为每个项添加下边框，但最后一个不需要。
示例：给所有不是最后一个的列表项添加分隔线：
.list li:not(:last-child) {
border-bottom: 1px solid #ccc;
}
这样，只有非末尾的
li会被选中，避免最后一条多余的边框。
立即学习“前端免费学习笔记（深入）”；
选择特定类型元素中的“非最后一个”
当容器中包含多种类型的子元素（如
div、
p、
span），你可能只想针对某一类元素排除其最后一个。 示例：
在一个内容区域中，只对非最后一个段落添加间距：
.content p:not(:last-child) {
margin-bottom: 1em;
}
这确保即使后面还有其他元素（比如图片或按钮），只要该段落不是整个父容器的最后一个子元素，就会保留底部间距。
配合类名进行更精细控制
你可以将
:not()与类结合，排除带有特定类的最后一个子元素，或者反向操作。 示例1：
选择所有子元素中不是
.highlight类且不是最后一个的项：
.container > :not(.highlight):not(:last-child) {
margin-right: 10px;
}
这种写法常用于布局微调，比如让普通项有间距，高亮项和最后一项无右边距。
示例2：如果你想选中“是最后一个子元素但没有某个类”的元素：
.item:last-child:not(.sticky) {
padding-bottom: 20px;
}
这在处理固定定位或特殊状态项时很有用，比如最后一个普通项需要额外留白。
嵌套结构中的高级用法
在复杂DOM结构中，可结合后代选择器或直接子代操作，精准命中目标。
比如：在一个卡片组件中，希望每个区块内的段落之间有间距，但最后一个段落不加。
.card .section p:not(:last-child) {
margin-bottom: 8px;
}
注意这里作用范围是每个
.section内部的
p，而非整个卡片的最后一个段落，因此不会互相干扰。
基本上就这些。合理利用
:not(:last-child)能减少HTML中冗余的类名，提升样式的可维护性。关键是理解它匹配的是“满足条件且不是最后一个”的元素，逻辑清晰就能写出高效选择器。
