Maison > Article > interface Web > Explication détaillée de la propriété Counters de CSS

Explication détaillée de la propriété Counters de CSS

php中世界最好的语言original: 2018-03-09 13:30:212196parcourir

Cette fois, je vais vous apporter une explication détaillée de l'attribut Counters de CSS Quelles sont les précautions lors de l'utilisation de l'attribut Counters de CSS Voici un cas pratique, jetons un coup d'oeil.

counter-reset : Cette valeur est obligatoire. Doit être utilisé dans les sélecteurs, principalement utilisé pour identifier la portée, et sa valeur peut être personnalisée.
Compteur-incrément : Utilisé pour identifier la plage associée au compteur.
content : utilisé pour générer du contenu, qui est un attribut de :before, :after ou ::before, ::after. Lors de la génération du contenu du compteur, il est principalement utilisé avec counter().
counter() : Cette fonction est utilisée pour définir la valeur du compteur d'insertion.
:before, :after ou ::before, ::after : utilisé avec du contenu pour générer du contre-contenu.

Exemple mdn :

<!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="utf-8" /><title>counters()函数_CSS参考手册_web前端开发参考手册系列</title><meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /><style>ol {    margin: 0;    padding: 0 0 0 2em;    list-style: none;    counter-reset: item;
}li:before {    counter-increment: item;    content: counters(item, ".");    color: #f00;
}</style></head><body><ol class="test">
    <li>Node        <ol>
            <li>Node                <ol>
                    <li>Node</li>
                    <li>Node</li>
                    <li>Node</li>
                </ol>
            </li>
            <li>Node</li>
        </ol>
    </li>
    <li>Node</li>
    <li>Node</li></ol></body></html>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php. !

Lecture connexe :

Comment éviter les caractères tronqués lors de l'encodage d'URI (url) en JS ?

Comment les données front-end et back-end doivent interagir scientifiquement

Comment utiliser les valeurs de marge négatives en CSS

Comment gérer les plantages fréquents de Chrome dus à une mémoire insuffisante

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de la surcharge de fonctions en JavaScriptArticle suivant：Explication détaillée de la surcharge de fonctions en JavaScript

Articles Liés

Voir plus