Bagaimana untuk menambah koma secara dinamik antara senarai item menggunakan CSS?-tutorial css-php.cn

Bagaimana untuk menambah koma secara dinamik antara senarai item menggunakan CSS?

PHPz

Lepaskan： 2023-08-30 20:33:05

ke hadapan

891 orang telah melayarinya

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

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
}

Salin selepas log masuk

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

unsur.

::sebelum选择器

Pemilih ::before digunakan untuk memasukkan kandungan datang sebelum elemen yang dipilih.

语法

el::before {
   css declarations
}

Salin selepas log masuk

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会在

元素之前添加内容。

方法

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>

Salin selepas log masuk

结论

总结一下，利用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!