Comment CSS peut-il créer des listes ordonnées imbriquées avec une numérotation telle que 1.1, 1.2, 1.3 ?

Listes ordonnées avec numérotation imbriquée

Le CSS peut-il produire des éléments de liste ordonnés qui apparaissent sous la forme 1.1, 1.2, 1.3 au lieu de 1, 2 par défaut , 3 séquences ?

Solution utilisant Compteurs

Pour obtenir ce résultat, vous pouvez exploiter la puissance des compteurs CSS :

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

La feuille de style ci-dessus initialise un compteur appelé item pour chaque

élément. Le
1. les éléments sont définis pour s'afficher sous forme de blocs et un pseudo-élément :before est ajouté à chaque
2. pour afficher la valeur du compteur suivie d'un point et d'un espace. La propriété counter-increment incrémente le compteur pour chaque
3. élément.

   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 le CSS appliqué, ce code HTML affichera les éléments de la liste avec une numérotation imbriquée comme vous le souhaitez :

   • 1. élément li
     2. 1.1. élément sub li
     3. 1.2. élément sub li
     4. 1.3. élément sub li
   • 2. élément li
   • 3. élément li
     4. 3.1 . élément sub li
     5. 3.2. élément sub li
     6. 3.3. élément sub li

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!