Comment puis-je créer des listes numérotées personnalisées (par exemple, 1.1, 1.2, 1.3) avec CSS ?

Numérotation personnalisée dans les listes ordonnées avec CSS

Les listes ordonnées peuvent-elles être stylisées pour afficher les nombres comme 1.1, 1.2, 1.3, au lieu de seulement 1 , 2, 3 ?

La propriété de type list-style n'offre pas de contrôle direct sur sous-numérotation. Cependant, il existe une solution intelligente utilisant des compteurs CSS :

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

Cette approche définit un compteur pour chaque élément de la liste, qui est incrémenté avec chaque élément imbriqué. La fonction counters(item, ".") formate le compteur sous forme de nombre avec un séparateur de points.

Pour illustrer, considérons ce balisage HTML :

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

L'application du style CSS entraînerait dans la liste suivante :

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

Cette technique offre un moyen flexible de personnaliser la numérotation des listes ordonnées, permettant des listes plus complexes et hiérarchiques avec des séparateurs et schémas de numérotation.

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!