Comment inverser les compteurs personnalisés CSS

J'ai besoin d'une liste des numéros de billet de blog, en commençant par le dernier / maximum de nombre, puis décrémentant. Par exemple:

 <code>5. 文章标题4. 文章标题3. 文章标题2. 文章标题1. 文章标题</code>

Mais c'est juste du texte. Je veux utiliser la sémantique<ol></ol> Éléments pour y parvenir.

Méthode simple

Vous pouvez utiliser l'attribut reversed de HTML dans<ol></ol> Mis en œuvre sur les éléments:

<ol reversed="">
  <li>ce</li>
  <li>Liste</li>
  <li>volonté</li>
  <li>Dans l'ordre inverse</li>
  <li>numéro de série</li>
</ol>

Pour la plupart des gens, c'est suffisant. La tâche est terminée.

Mais j'ai besoin d'un compteur de style personnalisé .

Il convient de noter que les styles de numérotation de liste personnalisés peuvent être mis en œuvre en utilisant ::marker , mais cela n'est pas encore pris en charge par Chrome (bien que j'aie entendu dire qu'il sera bientôt pris en charge).

Comme je veux être entièrement compatible avec les styles de numérotation personnalisés pour tous les navigateurs, j'ai utilisé un compteur personnalisé.

Ajouter et définir des compteurs personnalisés

Pour rendre le style de compteur d'une liste commandée différente du reste de la liste, vous devez désactiver le compteur par défaut et créer et afficher nos propres compteurs en utilisant un compteur CSS. Chris a partagé quelques conseils qui méritent d'être vérifiés auparavant.

Supposons que nous ayons le HTML suivant:

<ol>
  <li>Article 1</li>
  <li>Projet 2</li>
  <li>Projet 3</li>
</ol>

... Tout d'abord, nous devons désactiver les compteurs par défaut qui sont livrés avec toutes les listes commandées en définissant le list-style-type CSS sur none , comme indiqué ci-dessous:

 ol.fancy-nuagered {
  Type de style liste: aucun;
}

Cela supprime tous les numéros par défaut. Ensuite, nous créons un compteur dans CSS pour suivre le nombre d'éléments dans la liste.

 ol.fancy-nuagered {
  Type de style liste: aucun;
  contre-réinitialisation: a;
}

Cela nous donne un compteur nommé "A", mais peut être nommé comme il se doit. Utilisons ::before le pseudo-élément sur l'élément de liste pour afficher notre compteur ( li::before ).

 Ol.fancy-numéro Li :: avant {
  Contenu: compteur (a) '.';
}

Cela définit le contenu du pseudo-élément à la valeur de notre compteur. Cela imprimera désormais 1 à côté de votre élément de liste.

Nous devons dire au compteur CSS comment augmenter.

 Ol.fancy-numéro Li :: avant {
  Contenu: compteur (a) '.';
  Counter-Increment: A;
}

"A" a une valeur de début de zéro, ce qui semble impair, mais l'incrément par défaut est 1, ce qui signifie qu'il devient le point de départ réel. L'incrément 1 se trouve être la valeur par défaut, mais nous verrons bientôt que nous pouvons le changer.

Nous pouvons désormais continuer à appliquer tout style personnalisé que nous voulons au comptoir, car le compteur n'est qu'un pseudo-élément texte qui est ouvert au style:

 Ol.fancy-numéro Li :: avant {
  Contenu: compteur (a) '.';
  Counter-Increment: A;
  Position: absolue;
  à gauche: 0;
  Couleur: bleu;
  taille de police: 4rem;
}

Par exemple, ici, nous faisons le contre-couleur en bleu et augmentons la taille de la police. Ce sont des choses que nous ne pouvons pas faire avec le compteur par défaut.

Compteur personnalisé inversé

Si nous faisons<ol></ol> Ajoutez un attribut reversed à l'élément et nous observerons qu'il n'y a aucun effet car nous désactivons la numérotation par défaut. C'est exactement ce que fait cet attribut.

<ol reversed="">
  <li>Article 1</li>
  <li>Projet 2</li>
  <li>Projet 3</li>
</ol>

Le code ci-dessus n'a aucun effet sur notre numérotation personnalisée. Il est préférable de le garder, car notre objectif est d'inverser la liste. Cela maintient la sémantique exacte.

Pour inverser l'ordre visuel en fonction du numéro du compteur, nous devons connaître le nombre total d'éléments dans la liste et demander au compteur de commencer ce nombre, puis de diminuer à partir de là.

 ol.fancy-nuagered {
  contre-réinitialisation: un 4;
  Type de style liste: aucun;
}

Ici, nous définissons counter-reset sur 4. En d'autres termes, nous disons au navigateur de commencer à compter à partir de 4 au lieu de 1. Nous utilisons 4 au lieu de 3, encore une fois parce que counter() est appliquée au premier élément de la liste, c'est-à-dire 0. Mais, dans notre compte à rebours, 4 devient notre 0. Si nous commençons à diminuer à partir de 3, nous nous retrouvons avec 0 au lieu de 1.

Ensuite, nous modifions notre règle counter-increment en diminuant de 1 au lieu d'augmenter en faisant de l'entier négatif .

 Ol.fancy-numéro Li :: avant {
  Contenu: compteur (a) '.';
  Counter-Increment: A -1;
  Position: absolue;
  à gauche: 0;
  Couleur: bleu;
  taille de police: 4rem;
}

C'est ça! Vous pouvez maintenant l'utiliser comme vous aimez un tracker de pas:

Ou chronologie:

Ou un plan d'affaires?

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!