:last-child与:not结合控制末项样式方法

本文深入讲解了如何利用 CSS 中 `:not(:last-child)` 这一高效组合选择器，精准控制列表、导航栏或布局项中“除最后一项外”的样式应用——如添加分隔线、间距或边框，从而避免末尾冗余样式，提升界面整洁度与代码简洁性；同时辨析了其与 `:not(:last-of-type)` 的关键区别，强调 `:last-child` 依赖父元素内子节点的绝对位置，而 `:last-of-type` 才按元素类型匹配，帮助开发者在复杂 DOM 结构中做出正确选择，真正实现灵活、可靠、语义清晰的样式控制。

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

终于介绍完啦！小伙伴们，这篇关于《:last-child与:not结合控制末项样式方法》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！