LabEx
EntrerRejoindre

Compteurs de liste imbriqués avec CSS

Beginner

This tutorial is from open-source community. Access the source code

Introduction

Dans ce laboratoire, nous allons explorer l'utilisation des compteurs CSS pour créer des compteurs de liste personnalisés. Plus précisément, nous apprendrons comment initialiser et incrémenter des variables de compteur, et comment afficher la valeur de ces variables à l'aide de la fonction counters(). À la fin de ce laboratoire, vous serez capable de créer des compteurs de liste imbriqués et de personnaliser l'apparence des éléments de liste à l'aide de CSS.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Compteur

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Pour créer un compteur de liste personnalisé qui prend en compte les éléments de liste imbriqués, suivez ces étapes :

  1. Utilisez counter - reset pour initialiser un compteur variable (valeur par défaut 0), le nom étant la valeur de l'attribut (par exemple compteur).
  2. Utilisez counter - increment sur le compteur variable pour chaque élément comptable (par exemple chaque <li>).
  3. Utilisez counters() pour afficher la valeur de chaque compteur variable comme partie du contenu de l'élément pseudo - élément ::before pour chaque élément comptable (par exemple chaque <li>). La deuxième valeur passée à elle ('.') sert de délimiteur pour les compteurs imbriqués.

Voici un exemple de code HTML :

<ul>
  <li>Élément de liste</li>
  <li>Élément de liste</li>
  <li>
    Élément de liste
    <ul>
      <li>Élément de liste</li>
      <li>Élément de liste</li>
      <li>Élément de liste</li>
    </ul>
  </li>
</ul>

Et voici le code CSS pour appliquer le compteur de liste personnalisé :

ul {
  counter - reset: compteur;
  list - style: none;
}

li::before {
  counter - increment: compteur;
  content: counters(compteur, ".") " ";
}

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations! Vous avez terminé le laboratoire Compteur. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.