Comment ajouter dynamiquement des virgules entre une liste d'éléments en utilisant CSS ?-tutoriel CSS-php.cn

Comment ajouter dynamiquement des virgules entre une liste d'éléments en utilisant CSS ?

PHPz

Libérer： 2023-08-30 20:33:05

avant

836 Les gens l'ont consulté

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

Les listes contenant plusieurs éléments sont fréquemment utilisées sur les sites Web, et les séparer par des virgules peut contribuer à améliorer la lisibilité et l'expérience utilisateur. La méthode conventionnelle pour ajouter des virgules aux listes consiste à les ajouter manuellement. Cependant, comme vous l'avez peut-être déjà deviné, cela peut être un processus ardu et long, en particulier pour les longues listes. Heureusement, la possibilité d'ajouter dynamiquement des virgules aux listes d'éléments avec CSS est une excellente solution.

~ Sélecteur

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

语法

el1~el2 {
   css declarations
}

Copier après la connexion

Dans ce contexte, "el1" symbolise le composant précédent des composants confrères, tandis que "el2" représente les composants confrères suivants situés dans une unité parentale partagée.

Par exemple, a ~ ul, sélectionne chaque

élément.

::avant

Le sélecteur ::before est utilisé pour insérer du contenu avant l'élément sélectionné.

语法

el::before {
   css declarations
}

Copier après la connexion

Ici, el est l'élément auquel le pseudo-élément ::before sera appliqué. Le pseudo-élément ::before est précédé de deux deux-points (::) pour le distinguer de la pseudo-classe :before, qui est une syntaxe plus ancienne qui est toujours prise en charge pour des raisons de compatibilité ascendante.

例如，p::before会在

元素之前添加内容。

方法

L'approche pour ajouter dynamiquement des virgules entre une liste d'éléments avec CSS implique l'utilisation d'un pseudo-élément appelé ::before qui peut insérer du contenu avant l'élément sélectionné. Dans ce cas, nous ciblons les éléments li dans une liste ul et ajoutons une virgule avant chacun à l'aide du sélecteur ::before. Cette méthode nous permet d'éviter d'ajouter manuellement des virgules à la liste et d'automatiser le processus avec CSS. De plus, nous pouvons utiliser les propriétés display et flex-wrap pour organiser les éléments de la liste et garantir qu'ils sont renvoyés sur une nouvelle ligne si nécessaire. Enfin, nous pouvons utiliser JavaScript pour ajouter et supprimer des éléments de liste de manière dynamique.

Exemple

的中文翻译为：

示例

以下代码使用CSS在一组项目之间动态添加逗号。文档包括一个标题，带有CSS属性的样式标签， "Article"删除项目的按钮的div标签。样式标签包括一个伪元素选择器，在每个列表项之前（除了第一个） " Item！”

<!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>

Copier après la connexion

结论

总结一下，利用CSS在文章串中动态包含逗号的使用是一种聪明的策略，它能够提高网页的可Il s'agit d'une application CSS.琐碎的问题。通过发挥想象力和探索新的可能性的热情，您可以利用CSS的潜力来创建引人注目和艺术性的壮丽网页设计，给观众留下深刻的印象。因此，请毫不犹豫地尝试各种可用工具和技术，并发挥您的网页开发专业知识的全部潜力。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!