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

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

Susan Sarandon
Libérer: 2024-12-19 00:52:11
original
523 Les gens l'ont consulté

How Can CSS Counters Create Decimal Numbering in Nested Ordered Lists?

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 }
Copier après la connexion

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>
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal