Règle @counter-style CSS

Définition et utilisation

CSS @counter-style La règle est utilisée pour définir un style de compteur personnalisé.

Lorsque les styles prédéfinis ne correspondent pas aux besoins,@counter-style La règle permet de définir son propre style de compteur.

Exemple

Définir un style de compteur personnalisé pour la liste :

@counter-style crown {
  system: cyclic;
  symbols: "\1F451";
  suffix: " ";
}
ul {
  list-style: crown;
}

Essayer personnellement

Syntaxe CSS

@counter-style countername {
  one or more descriptors
}

Valeur de l'attribut

Valeur Description
countername

Définir le nom en majuscules et minuscules du style de compteur.

Note : le nom du compteur ne peut pas être : none, decimal, disc, square, circle, disclosure-open ou disclosure-closed.
system

Définir l'algorithme qui convertit la valeur entière du compteur en chaîne de caractères.

Nécessaire si le système est réglé sur cyclic, numeric, alphabetic, symbolic ou fixed,则需要 symbols désignateur.

Nécessaire si le système est réglé sur additive,则需要 additive-symbols désignateur.
symbols

Définir les symboles utilisés pour les marquages (qui peuvent être des chaînes de caractères, des images ou des identifiants personnalisés).

Nécessaire si le désignateur system est réglé sur cyclic, numeric, alphabetic, symbolic ou fixed.

Symboles UTF-8 HTML.
additive-symbols

Définir le groupe de symboles additionnels du système additionnel.

Le système de compteur additionnel (comme les chiffres romains) est composé d'une série de symboles pondérés.

La liste des symboles de compteur et de leurs poids entiers non négatifs est triée par ordre décroissant par poids.

Nécessaire si le désignateur system est réglé sur additive.
negative Définir le symbole de préfixe ou de suffixe à ajouter à la représentation du marquage lorsque la valeur est négative.
prefix Définir le symbole de préfixe à ajouter à la représentation du marquage.
suffix Définir le symbole de suffixe à ajouter à la représentation du marquage.
range

Définir la plage de valeurs du style de compteur.

Revenir au style de secours si la valeur du compteur dépasse la plage.
pad

Utiliser ce désignateur si le marquage doit avoir une longueur minimale.

Par exemple, si vous souhaitez que le compteur commence par 01 et continue par 02, 03, 04, etc., utilisez le désignateur pad.

Pour les compteurs avec une valeur supérieure à la valeur pad spécifiée, le marquage est construit normalement.
speak-as

Définir comment le synthétiseur vocal doit lire le style de compteur.

Par exemple, pour une liste ordonnée, lire en tant que nombre ou lettre ; pour une liste non ordonnée, lire en tant que提示 audio.
fallback

Définir le nom du compteur de secours si le système ne peut pas construire le marquage ou s'il dépasse la plage spécifiée.

Si le compteur de secours ou le système de secours ne peut pas représenter la valeur du compteur, revenir au style décimal.

Support du navigateur

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge intégralement cette règle @.

Chrome Edge Firefox Safari Opera
91 91 33 17 77