CSS 如何动态将项目列表之间添加逗号

包含多个项目的列表经常在网站中使用，用逗号分隔它们可以提高可读性和用户体验。传统的方法是手动添加逗号到列表中。然而，这可能是一个繁琐和耗时的过程，特别是对于长列表来说。幸运的是，使用CSS动态地将逗号添加到项目列表中是一个很好的解决方案。

`~`选择器

在CSS中，~选择器用于选择HTML DOM中在所需元素之前的所有元素。

语法

el1~el2 {
   css declarations
}

在这个上下文中，“el1”象征着前面的组件，而“el2”代表着位于共享父级单元中的后续的同级组件。

例如，a ~ ul会选中每个在<a>元素之前的<ul>元素。

`::before`选择器

::before选择器用于在选中元素之前插入一些内容。

语法

el::before {
   css declarations
}

在这里， el是将应用::before伪元素的元素。 ::before伪元素之前有两个冒号（::），以将其与:before伪类区分开来，后者是一种仍支持向后兼容的旧语法。

例如，p::before会在<p>元素之前添加内容。

方法

使用CSS在一系列项目之间动态添加逗号的方法涉及使用一个名为::before的伪元素，它可以在选定元素之前插入内容。在这种情况下，我们通过目标为ul列表中的li元素，并使用::before选择器在每个li元素之前添加逗号。此方法允许我们避免手动向列表添加逗号，并使用CSS自动化该过程。此外，我们可以使用display和flex-wrap属性来排列列表项，并确保它们在需要时换行到新行。最后，我们可以使用JavaScript动态添加和删除列表项。

示例

以下代码使用CSS在一系列项目之间动态添加逗号。文档包括一个标题，带有CSS属性的style标签，以及一个包含标题、带有类名”item”的项目列表和两个用于添加和删除项目的按钮的div标签。style标签包括一个伪元素选择器，在除第一个之外的每个列表项之前添加逗号和空格。script标签定义了两个函数；addItem函数添加带有文本”Item!”的新列表项，而removeItem函数随机选择并删除一个列表项。

<!DOCTYPE html>
<html>
<head>
   <style>
      .items {
         display: flex;
         list-style: none;
         padding: 0;
         flex-wrap: wrap
      }
      .item~.item::before {
         content: ", ";
      }
   </style>
</head>
<body>
   <h4>How to Add Commas Between a List of Items Dynamically with CSS?</h4>
   <div>
      <ul class="items">
         <li class="item">Eggs</li>
         <li class="item">Bread</li>
      </ul>
   </div>
   <div>
      <button onclick="addItem()">Add Item</button>
      <button onclick="removeItem()">Remove Item</button>
   </div>
   <script>
      function removeItem(){
         let items=document.querySelectorAll('.item');
         let idx=Math.floor(Math.random()*items.length);
         items[idx].remove();
      }
      function addItem(){
         let itemList=document.querySelector(".items");
         let item=document.createElement("li");
         item.innerText="Item!";
         item.className="item";
         itemList.append(item);
      }
   </script>
</body>
</html>

结论

总结来说，利用CSS在文章中动态插入逗号的技巧是一种聪明的策略，可以提高网页的可读性和视觉吸引力。通过利用CSS的罕见技能，网页设计师可以解决看似微不足道的问题。通过发挥想象力和探索新的可能性，您可以利用CSS的强大潜力打造令人信服和艺术性卓越的网页设计，给您的观众留下深刻的印象。因此，请毫不犹豫地尝试各种可用的工具和技术，释放您的网页开发专长的全部潜力。