Les compteurs CSS peuvent-ils créer des listes numérotées avec des points décimaux ?

Création de listes numérotées avec des points décimaux

Le CSS peut-il être utilisé pour générer des listes numérotées avec des points décimaux, telles que 1.1, 1.2 et 1.3 , plutôt que seulement 1, 2 et 3 ? L'application de list-style-type:decimal ne produit que cette dernière séquence.

Solution : utiliser des compteurs

Pour obtenir le résultat souhaité, des compteurs peuvent être utilisés :

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

Cette feuille de style CSS attribue à chaque élément de liste imbriquée un numéro avec des points décimaux. Par exemple, "1", "1.1", "1.1.1", etc.

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>

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!