Maison > interface Web > js tutoriel > le corps du texte

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

php中世界最好的语言
Libérer: 2018-03-09 13:30:21
original
2237 Les gens l'ont consulté

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>
Copier après la connexion

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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!