CSS中使用:last-child结合:not排除最后一个元素的样式，可以通过选择器组合实现。具体用法如下：1. 基本语法element:not(:last-child) { /* 样式规则 */ }2. 示例说明假设你有一个无序列表（

），其中每个列表项（
• ）需要设置边框，但最后一个列表项不需要：
  • 项目1
  • 项目2
  • 项

在CSS中，`:not(:last-child)` 是一种简洁高效的样式控制技巧，能精准选中父元素内除最后一个子元素外的所有同级目标元素，常用于为列表项添加分隔线、按钮组设置间距等场景，避免末尾冗余样式（如下边框或外边距），让界面更干净专业；需注意其基于父级DOM位置判断而非元素类型，若需按标签类别排除末项，则应改用 `:not(:last-of-type)`，掌握这一组合可大幅提升样式编写的灵活性与可维护性。

在CSS中，:last-child 用于选中父元素中的最后一个子元素。当我们想对“除了最后一个子元素之外的所有子元素”设置样式时，可以结合 :not() 伪类来实现精准控制。这种组合非常实用，尤其是在处理列表、导航菜单或布局项时，避免末尾元素的多余样式（如下边框或外边距）。

:not(:last-child) 排除最后一项

最常见的用法是使用 :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) 的用法，能让你更灵活地控制列表和布局中的样式边界问题，写起来简洁又高效。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。