Comment créer des listes ordonnées numérotées décimales avec des compteurs CSS ?

Ordre des listes avec des nombres décimaux et CSS

Dans une liste ordonnée, vous pouvez rencontrer le besoin d'afficher les nombres dans un format spécifique, tel que 1.1, 1.2, 1.3 , au lieu de la séquence par défaut de 1, 2, 3. Lors de l'utilisation de list-style-type:decimal, seuls les nombres répertorient les éléments de manière séquentielle, il est Il est possible d'obtenir le format de numérotation souhaité à l'aide de compteurs CSS.

Solution : Utiliser des compteurs

Les compteurs vous permettent de manipuler la valeur numérique affichée pour les éléments de la liste. Voici le code CSS pour créer un système de numérotation hiérarchique :

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }

Exemple

Considérez la structure HTML suivante :

<ol>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
  <li>li element</li>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
</ol>

En appliquant le code CSS ci-dessus, le résultat sera :

1. li element
   1.1 sub li element
   1.2 sub li element
   1.3 sub li element
2. li element
3. li element
   3.1 sub li element
   3.2 sub li element
   3.3 sub li element

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!