使用 :not(:last-child) 可选中除最后一个子元素外的所有同级元素，常用于为列表项添加分隔线或间距时排除末尾元素；例如 li:not(:last-child) { border-bottom: 1px solid #ccc; } 可为每个列表项下方加边框，但最后一项不加，使界面更整洁。该选择器基于父元素中的位置判断，若需按标签类型排除末项，应改用 :not(:last-of-type)。
在CSS中，:last-child 用于选中父元素中的最后一个子元素。当我们想对“除了最后一个子元素之外的所有子元素”设置样式时，可以结合 :not() 伪类来实现精准控制。这种组合非常实用，尤其是在处理列表、导航菜单或布局项时，避免末尾元素的多余样式（如下边框或外边距）。
最常见的用法是使用 :not(:last-child) 来选择非最后一个子元素。比如，你有一组列表项，希望每个项下面都有分隔线，但最后一个不需要。
例如：
li:not(:last-child) {
border-bottom: 1px solid #ccc;
}
这样，只有不是最后一个的 li 元素才会应用下边框，视觉上更干净。
你可以将 :not(:last-child) 和其它类或标签选择器结合，实现更精细的控制。
立即学习“前端免费学习笔记（深入）”；
场景示例：仅对特定类的元素排除最后一项
.item:not(:last-child) {
margin-right: 20px;
}
这表示所有带有 .item 类的元素，只要不是父容器中的最后一个子元素，都会添加右侧外边距。常用于水平排列的按钮或标签组。
:last-child 判断的是其在父元素中的位置，而不是同类元素中的顺序。如果最后一个子元素不是目标类型，:not(:last-child) 可能不会按预期工作。
举例说明：
<div> <p>段落 1</p> <p>段落 2</p> <span>其他元素</span> </div>
此时，第二个 p 虽然是 p 标签中的最后一个，但它不是父元素的最后一个子元素（span 才是）。因此 p:last-child 不会匹配它。若要基于同类元素排除末项，应使用 :last-of-type：
p:not(:last-of-type) {
margin-bottom: 1em;
}
基本上就这些。掌握 :not(:last-child) 的用法，能让你更灵活地控制列表和布局中的样式边界问题，写起来简洁又高效。
以上就是CSS伪类:last-child如何与:not结合排除最后元素_使用:last-child :not控制末项样式的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
310
收藏
