数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 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 选择器在每个元素之前添加逗号。此方法使我们能够避免手动将逗号添加到列表中，并使用 CSS 自动执行此过程。此外，我们可以使用 display 和 flex-wrap 属性来排列列表项，并在必要时确保它们换行。最后，我们可以使用 JavaScript 动态地添加和删除列表项。
示例
以下代码使用 CSS 动态地在项目列表之间添加逗号。文档包括一个标题、带有 CSS 属性的样式标签以及一个包含标题、具有“item”类名的项目列表以及用于添加和删除项目的两个按钮的 div 标签。样式标签包含一个伪元素选择器，该选择器在除了第一个列表项之外的每个列表项之前添加逗号和空格。脚本标签定义了两个函数；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 的强大功能来创建引人入胜且美观绝伦的网页设计，给您的观众留下持久的影响。因此，不要犹豫，尝试使用您掌握的各种工具和技术，并释放您 Web 开发专业知识的全部潜力。
976 次浏览
