CSS:last-child与not高级选择技巧解析

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《CSS:last-child与not实现高级选择技巧》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

使用 :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() 与类结合，排除带有特定类的最后一个子元素，或者反向操作。

选择所有子元素中不是 .highlight 类且不是最后一个的项：

.container > :not(.highlight):not(:last-child) {
  margin-right: 10px;
}

这种写法常用于布局微调，比如让普通项有间距，高亮项和最后一项无右边距。

如果你想选中“是最后一个子元素但没有某个类”的元素：

.item:last-child:not(.sticky) {
  padding-bottom: 20px;
}

这在处理固定定位或特殊状态项时很有用，比如最后一个普通项需要额外留白。

嵌套结构中的高级用法

在复杂DOM结构中，可结合后代选择器或直接子代操作，精准命中目标。

比如：在一个卡片组件中，希望每个区块内的段落之间有间距，但最后一个段落不加。

.card .section p:not(:last-child) {
  margin-bottom: 8px;
}

注意这里作用范围是每个 .section 内部的 p，而非整个卡片的最后一个段落，因此不会互相干扰。

基本上就这些。合理利用 :not(:last-child) 能减少HTML中冗余的类名，提升样式的可维护性。关键是理解它匹配的是“满足条件且不是最后一个”的元素，逻辑清晰就能写出高效选择器。

以上就是《CSS:last-child与not高级选择技巧解析》的详细内容，更多关于的资料请关注golang学习网公众号！