CSS 如何在除了最后一个项目之外的所有项目上添加 border-bottom

在本文中，我们将介绍如何使用 CSS 在多个项目中添加 border-bottom 样式，同时排除最后一个项目。

阅读更多：CSS 教程

使用 :not() 选择器

要在除了最后一个项目之外的所有项目上添加 border-bottom，我们可以使用 CSS 的 :not() 选择器。:not() 选择器允许我们排除特定的元素，从而选择其他的元素来应用样式。

以下是一个示例，展示如何在一个包含多个项目的列表中应用 border-bottom 样式，但不包括最后一个项目：

ul li:not(:last-child) {
  border-bottom: 1px solid black;
}

在上面的示例中，我们使用了 :not() 选择器来选中所有不是最后一个子元素的 li 元素。然后，我们为这些元素应用了 border-bottom 样式。

示例说明

假设我们有一个包含多个项目的无序列表（ul），我们想要在每个项目之间添加一个细黑色边框作为分隔线，但不希望最后一个项目有这个边框。

<ul>
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
  <li>项目4</li>
  <li>项目5</li>
</ul>

我们可以使用上述提到的 CSS 代码来实现我们的需求。这样，除了最后一个项目之外，其他所有项目都会有一个细黑色边框作为分隔线。

总结

在本文中，我们介绍了如何使用 CSS 的 :not() 选择器来在除了最后一个项目之外的所有项目上添加 border-bottom 样式。通过使用这个选择器，我们可以很容易地控制哪些元素应用样式，哪些被排除在外。这为我们创建各种不同样式的列表提供了更多的灵活性。