Rumah > Artikel > hujung hadapan web > Bagaimana untuk menambah koma secara dinamik antara senarai item menggunakan CSS?
Bagaimana untuk menambah koma secara dinamik antara senarai item menggunakan CSS?
- PHPzke hadapan
- 2023-08-30 20:33:05788semak imbas
Senarai yang mengandungi berbilang item kerap digunakan dalam tapak web dan mengasingkannya dengan koma boleh membantu meningkatkan kebolehbacaan dan pengalaman pengguna. Kaedah konvensional untuk menambah koma pada senarai adalah dengan menambahnya secara manual. Walau bagaimanapun, seperti yang anda mungkin telah meneka ini boleh menjadi proses yang sukar dan memakan masa, terutamanya untuk senarai panjang. Nasib baik, keupayaan untuk menambah koma secara dinamik pada senarai item dengan CSS ialah penyelesaian yang sangat baik.
~ Pemilih
在CSS中，~选择器用于选择在HTML DOM中位于所需元素之前的所有元素。
语法
el1~el2 {
css declarations
}
Dalam konteks ini, "el1" melambangkan komponen sebelumnya bagi komponen sesama, manakala "el2" mewakili komponen sesama berikutnya yang terletak dalam unit ibu bapa yang dikongsi.
Sebagai contoh, a ~ ul, memilih setiap ff6d136ddc5fdfeffaf53ff6ee95f185 elemen didahului oleh 3499910bf9dac5ae3c52d5ede7383485 unsur.
::sebelum选择器
Pemilih ::before digunakan untuk memasukkan kandungan datang sebelum elemen yang dipilih.
语法
el::before {
css declarations
}
Di sini, el ialah elemen yang elemen pseudo ::before akan digunakan. Unsur pseudo ::before didahului oleh dua titik bertindih (::) untuk membezakannya daripada kelas pseudo :before, iaitu sintaks lama yang masih disokong untuk keserasian ke belakang.
例如，p::sebelum会在e388a4556c0f65e1904146cc1a846bee元素之前添加内容。
方法
Pendekatan untuk menambah koma antara senarai item secara dinamik dengan CSS melibatkan penggunaan elemen pseudo yang dipanggil ::before yang boleh memasukkan kandungan sebelum elemen yang dipilih. Dalam kes ini, kami menyasarkan elemen li dalam senarai ul dan menambah koma sebelum setiap satu menggunakan ::before pemilih. Kaedah ini membolehkan kami mengelak daripada menambahkan koma secara manual pada senarai dan mengautomasikan proses dengan CSS. Selain itu, kita boleh menggunakan ciri paparan dan flex-wrap untuk menyusun item senarai dan memastikan ia membalut ke baris baharu jika perlu. Akhir sekali, kami boleh menggunakan JavaScript untuk menambah dan mengalih keluar item senarai secara dinamik.
Contoh
的中文翻译为：示例
以下代码使用CSS在一组项目之间动态添加逗号。文档包括一个标题，帱帱有的CS，帱帱有的CS及一个包含标题、具有类名为“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的潜力和探索新的可能性的热情，您可以利用CSS的潜力来切创力来创的热情。壮丽网页设计，给观众留下深刻的印象。因此，请毫不犹豫地尝试各种可用工具和技术，并发挥您的网页开发专业知识的全部潜力。
Atas ialah kandungan terperinci Bagaimana untuk menambah koma secara dinamik antara senarai item menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!