Explication détaillée de la propriété Counters de CSS-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-03-09 13:30:21

original

2251 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!