如何通过CSS动态列表在项目列表之间添加逗号

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

我们可以直接在HTML中添加逗号 (,)，但让我们看看如何在CSS中实现，这能给我们带来更多控制。同时，我们还要确保最后一个项目没有逗号。

我最近在一个实际项目中需要这个功能，部分需求是列表中的任何项目都可以通过JavaScript隐藏/显示。无论当前显示哪些项目，逗号都需要正确显示。

我发现一个相当优雅的解决方案是使用通用同级组合器。我们稍后再讨论这个。让我们先从一些示例HTML开始。假设您从一个水果列表开始：

<code></code>

• 香蕉
• 苹果
• 橙子
• 梨
• 油桃

以及一些基本的CSS使其显示为列表：

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

.fruit {
  display: none; /* 默认隐藏 */
} 
.fruit.on { /* JavaScript添加的类，用于显示列表项 */
  display: inline-block;
}

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

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

<code>香蕉橙子油桃</code>

现在，我们可以使用通用同级组合器在任意两个on元素之间添加逗号和空格：

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

不错！

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

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

这里有一个演示，其中包含几个略微不同的示例。水果示例使用隐藏类而不是on类，而蔬菜示例具有动画效果。这里还使用了SCSS进行嵌套：

我希望这能帮助其他寻找类似解决方案的人！

以上是如何通过CSS动态列表在项目列表之间添加逗号的详细内容。更多信息请关注PHP中文网其他相关文章！