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

假设你有一个项目列表。比如说，水果：香蕉、苹果、橘子、梨、油桃，我们可以把这些逗号（，）放在HTML中，但是让我们看看我们如何在CSS中实现这一点，给我们一个额外的控制级别。我们将确保最后一个项目没有逗号。我最近在一个实际项目中需要它，部分要求是列表中的任何项目都可以通过JavaScript隐藏/显示。无论当前显示的是哪一项，逗号都需要正常工作。我发现一个相当优雅的解决方案是使用通用同级组合器。我们马上就到。让我们从一些HTML示例开始。假设你从一个水果列表开始： And some basic CSS to make them appear in a list: .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类是用classListAPI操作的。到目前为止，我们的HTML和CSS将创建一个这样的列表： BananaOrangeNectarine 现在我们可以找到这个通用的兄弟组合符，在任意两个on元素之间应用逗号和空格： .fruit.on ~ .fruit.on::before {content: \", \"; } 好！您可能会想：为什么不在所有列表项上使用逗号，然后用类似于:last-child或:last-of-type的符号将其从最后一个列表项中删除呢。问题是，最后一个孩子可能在任何特定的时间都会\"离开\"。所以我们真正想要的是最后一个\"打开\"的项，这在CSS中是不容易实现的，因为没有什么比\"类的最后一个\"更有效的了。因此，一般兄弟组合的伎俩！在UI中，我使用了max-width而不是display，并将其在0和合理的最大值之间切换，这样我就可以使用转换更自然地打开和关闭项目，使用户更容易看到哪些项目正在列表中添加或删除。您也可以将相同的效果添加到伪元素中，使其变得超级平滑。下面是一个演示，其中有几个示例都是细微的变化。水果示例使用hidden类而不是on，蔬菜示例具有动画。SCSS在这里也用于嵌套：CodePen Embed Fallback 我希望这能帮助其他人寻找类似的东西！

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

admin_action_{$_REQUEST[‘action’]}

admin_footer-{$GLOBALS[‘hook_suffix’]}

customize_save_{$this->id_data[‘base’]}

customize_value_{$this->id_data[‘base’]}

get_comment_author_url

network_admin_edit_{$_GET[‘action’]}

network_sites_updated_message_{$_GET[‘updated’]}

pre_wp_is_site_initialized

WordPress 的SEO 教学：如何在网站中加入关键字（Meta Keywords）与Meta 描述（Meta Description）？

谷歌的SEO是什么