使用 :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()
与类结合，排除带有特定类的最后一个子元素，或者反向操作。
Seede AI
AI 驱动的设计工具
586 查看详情 示例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中冗余的类名，提升样式的可维护性。关键是理解它匹配的是“满足条件且不是最后一个”的元素，逻辑清晰就能写出高效选择器。
以上就是如何通过css:last-child和not伪类实现复杂选择的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1065664.html
微信扫一扫 
支付宝扫一扫 
