如何使用 CSS 动态地添加列表项之间的逗号

假设您有一个物品列表。例如，水果：香蕉、苹果、橙子、梨、油桃

我们可以将这些逗号 (,) 放入 HTML 中，但让我们看看如何在 CSS 中做到这一点，这将让我们有更多控制权。我们将确保最后一个项目没有逗号。

我最近在一个实际项目中需要这样做，其中一项要求是列表中的任何项目都可以通过 JavaScript 隐藏/显示。无论当前显示哪些项目，逗号都需要正常工作。

我发现一个相当优雅的解决方案是使用 通用兄弟组合器。我们稍后会谈到这一点。让我们从一些示例 HTML 开始。假设您从一个水果列表开始

<ul class="fruits">
  <li class="fruit on">Banana</li>
  <li class="fruit on">Apple</li>
  <li class="fruit on">Orange</li>
  <li class="fruit on">Pear</li>
  <li class="fruit on">Nectarine</li>
</ul>

以及一些基本 CSS 使它们以列表形式显示

.fruits {
  display: flex;
  padding-inline-start: 0;
  list-style: none;
}

.fruit {
  display: none; /* hidden by default */
} 
.fruit.on { /* JavaScript-added class to reveal list items */
  display: inline-block;
}

现在假设在这个界面中发生了某些事情，例如用户切换控件，过滤掉所有在寒冷气候中生长的水果。现在显示了一组不同的水果，因此 fruit.on 类使用 classList API 进行操作。

到目前为止，我们的 HTML 和 CSS 将创建一个这样的列表

BananaOrangeNectarine

现在我们可以使用通用兄弟组合器，在任意两个 on 元素之间应用逗号和空格

.fruit.on ~ .fruit.on::before {
  content: ', '; 
}

不错！

您可能在想：为什么不直接将逗号应用于所有列表项，并使用类似 :last-child 或 :last-of-type 的东西从最后一个列表项中删除逗号呢？这样做的问题是，最后一个子元素可能在任何时候都是“关闭”的。因此，我们真正想要的是最后一个“打开”的项目，这在 CSS 中不容易实现，因为没有类似“最后一个类”的东西可用。因此，可以使用通用兄弟组合器技巧！

在 UI 中，我使用了 max-width 而不是 display，并在 0 和一个合理的最大值之间切换，这样我就可以使用过渡更自然地将项目推入和推出，让用户更容易看到哪些项目正在添加到列表中或从列表中删除。您也可以将相同的效果添加到伪元素，使其变得非常流畅。

以下是一个演示，包含两个示例，它们都是略微不同的变体。水果示例使用 hidden 类而不是 on，而蔬菜示例包含动画。这里也使用了 SCSS 进行嵌套

希望这对其他寻找类似方法的人有所帮助！