Les pseudo-éléments en CSS sont en fait très faciles à utiliser, mais ils sont souvent négligés par tout le monde. De nombreuses personnes peuvent désormais penser uniquement que la valeur de l'attribut de contenu couramment utilisé dans les pseudo-éléments ne prend en charge que les chaînes. d'autres attributs de contenu couramment utilisés. Il existe également uri et counter. Ce que je veux présenter aujourd'hui est conter (counter).
Les compteurs en CSS sont similaires aux variables. Ils peuvent implémenter des fonctions de comptage simples et afficher les résultats sur la page. Ils sont largement utilisés sur les premiers sites Web. Pour implémenter un compteur, vous devez utiliser les attributs suivants :
Jetons un coup d'œil à la façon dont les compteurs sont utilisés en CSS.
1. Utilisez des compteurs pour la numérotation automatique
Les compteurs CSS incrémentent les variables selon des règles.
Les compteurs CSS utilisent les propriétés suivantes :
(1) counter-reset:name1 name2 crée ou réinitialise un compteur (plusieurs compteurs peuvent être définis en même temps, séparés par des espaces)
(2) contre-incrément : nom de la variable d'incrémentation de pas (peut en incrémenter un ou plusieurs)
(3) content:counter(name) insère le contenu généré (en utilisant des pseudo-éléments avant/après)
(4) La fonction counter() ou counters() ajoute la valeur du compteur à l'élément
Lors de la création d'un compteur, il doit être créé dans la balise précédente ou dans la balise parent de la balise. S'il est défini dans sa propre balise, il sera invalide.
Applications spécifiques :
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Programmation Dotcpp</title><style>div{counter-reset:counter1;}h2{counter-reset:counter2;}h2 : before{/*Définissez d'abord la taille du pas*/counter-increment:counter11;content:'th'counter(count er1)'section';}p::before{/*Définissez d'abord la taille du pas*/counter-increment:counter21;content:'La section 'counter(counter1)'';}</style></he ad><corps><div><h2></h2><p></p><p></p><p></p><h2></h2><p></p> <p></p><p></p><p></p></div></body></html>Résultats en cours d'exécution :
2. Initialiser le compteur
Pour utiliser un compteur, vous devez d'abord utiliser l'attribut counter-reset pour créer un compteur. Ce processus est appelé initialisation du compteur. Le format syntaxique de l'attribut counter-reset est le suivant :
compteur-réinitialisation : aucun|[<identifiant><integer>]
La description des paramètres est la suivante :
(1) aucun : empêcher la réinitialisation du compteur ;
(2) <identifiant> : Définir le nom du compteur ;
(3) <entier> : Définissez la valeur de départ du compteur. La valeur par défaut est 0 et peut être une valeur négative.
3. Le compteur augmente automatiquement
Après avoir initialisé le compteur, vous pouvez utiliser l'attribut counter-increment pour spécifier quand le compteur incrémentera. La syntaxe est la suivante :
contre-incrément : aucun|[<identifiant><integer>]
La description des paramètres est la suivante :
(1) aucun : empêche le compteur d'augmenter ;
(2) <identifiant> : Définir le nom du compteur à incrémenter ;
(3) <entier> : définissez la valeur que le compteur augmente à chaque fois. La valeur par défaut est 1 et peut être une valeur négative.
4. Afficher le compteur
Enfin, il y a comment afficher le compteur. Pour afficher un compteur vous pouvez utiliser la fonction counter() ou counters(). La syntaxe de ces deux fonctions est la suivante :
compteur(nom)compteurs(nom,chaîne,type-style-liste)
La description des paramètres est la suivante :
(1) nom : le nom du guichet ;
(2) chaîne : chaîne utilisée pour l'épissage lorsque des compteurs sont utilisés imbriqués ;
(3) list-style-type : le style affiché par le compteur peut être n'importe quelle valeur de "l'attribut list-style-type" autorisé en CSS.
Ce qui suit utilise un exemple simple pour démontrer l'utilisation des compteurs :
<!DOCTYPEhtml><html><head><style>body{counter-reset:chapter;}h5,h6{margin:5px05px;}h5{counter-reset:section;counter-increment:chapter;}h6{counter- incrément:section;}h5:avant{content:Chaptercounter(chapitre).; }h6:before{content:counter(chapter).counter(section);}</style></head><body><h5>Chapitre 1</h5><h6>Section 1</h6>< h6> Non. Section 2</h6><h6>Section 3</h6><h6>Section 4</h6><h5>Chapitre 2</h5><h6>Section 1</h6><h6>Chapitre Section 2</h6><h6>Section 3</h6><h6>Chapitre Section 2</h6><h6> h6><h6>Section 3</h6><h6>Section 4</h6></body></html>Résultats en cours d'exécution :
5. Contre-imbrication
De plus, les compteurs peuvent également être imbriqués et la fonction counters() peut être utilisée pour insérer une chaîne entre des compteurs imbriqués à différents niveaux, comme le montre l'exemple suivant :
<!DOCTYPEhtml><html><head><style>ol{/*Créez une nouvelle instance de compteur pour chaque élément ol*/counter-reset:ol-list;list-style-type:none;}li:before{ / *Augmentez uniquement l'instance actuelle du compteur*/counter-increment:ol-list;/*Augmentez les valeurs séparées par "." pour toutes les instances de compteur*/content:counters(ol-list,.),;} < /style></head><body><ol><li>Volume</li><li>Chapitre<ol><li>Section</li><li>Section</li><li>Section<ol ><li>Section</li><li>Section</li></ol></l i><li>Section<ol><li>Sous-section</li><li>Sous-section</li><li>Sous-section</li></ol></li></ol></li>< li>Chapitre</li><li>Chapitre</li></ol></body></html>Résultats en cours d'exécution :
