Comment les compteurs CSS peuvent-ils créer une numérotation décimale dans des listes ordonnées imbriquées ?

Utiliser CSS pour créer des listes ordonnées imbriquées avec une numérotation décimale

Les listes ordonnées affichent généralement des nombres comme 1, 2, 3 de manière séquentielle. Cependant, comment CSS peut-il être utilisé pour produire une numérotation plus spécifique comme 1.1, 1.2, 1.3, etc. ?

L'utilisation de list-style-type:decimal seule ne donne que des valeurs numériques de base. Pour créer la numérotation hiérarchique souhaitée, des compteurs peuvent être utilisés.

L'extrait de code suivant montre comment utiliser les compteurs :

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

Voici un exemple :

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

Avec ce CSS appliqué, la liste ordonnée résultante affichera des nombres tels que 1.1, 1.1.1, 1.2, 1.3 et ainsi de suite, représentant la hiérarchie imbriquée des éléments de la liste.

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!