Qu'est-ce que le compteur CSS (compteur)

Le contenu de cet article est de vous présenter ce qu'est un compteur css (compteur), afin que vous puissiez simplement comprendre les propriétés associées du compteur css. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Qu'est-ce que le compteur CSS ?

Counter est un outil puissant fourni par CSS3. C'est une méthode qui nous permet de numéroter automatiquement les éléments en utilisant CSS. Il peut être utilisé pour compter facilement tous les éléments de la page et réaliser des fonctions similaires à une liste ordonnée. Mais par rapport aux listes ordonnées, les compteurs CSS peuvent compter n'importe quel élément et peuvent également mettre en œuvre un comptage personnalisé. [Tutoriels vidéo associés recommandés : Tutoriel CSS3]

Propriétés associées du compteur CSS

1. L'attribut -reset

counter-reset est utilisé pour définir et initialiser un ou plusieurs compteurs CSS. Il peut prendre un ou plusieurs identifiants comme valeur qui précise le nom du compteur.

Utilisation de la syntaxe :

counter-reset: [ <标识符> <整数>? ]+ | none | inherit

Chaque nom de compteur peut être suivi d'une valeur facultative qui spécifie la valeur initiale du compteur.

Remarque :

1) Les mots-clés none, hériter et initial ne peuvent pas être utilisés comme noms de compteur ; les mots-clés aucun et hériter peuvent être utilisés comme valeur de l'attribut counter-reset.

La définition de none désactivera le compteur ; la configuration d'héritera de la valeur de réinitialisation du compteur de l'élément parent de l'élément. La valeur par défaut de l'attribut counter-reset est none.

2). La valeur initiale du compteur n'est pas le premier nombre/valeur lorsque le compteur est affiché.

Cela signifie que si vous souhaitez que le compteur commence à s'afficher à partir de 1, vous devez remettre la valeur initiale de la réinitialisation du compteur à zéro. 0 est la valeur initiale par défaut, donc si vous l'omettez, elle sera réinitialisée à zéro par défaut ; la réinitialisation du compteur autorise les valeurs négatives. Par conséquent, si vous souhaitez que le compteur commence à s'afficher à partir de zéro, vous pouvez définir sa valeur initiale sur -1.

Exemple :

someSelector{ 
    counter-reset: counterA;  /*计数器counterA 初始，初始值为0*/ 
    counter-reset: counterA 6;  /*计数器counterA 初始，初始值为6*/ 
    counter-reset: counterA 4 counterB;  /*计数器counterA 初始，初始值为4，计数器counterB  初始，初始值为0*/ 
    counter-reset: counterA 4 counterB 2;  /*计数器counterA 初始，初始值为4，计数器counterB 初始，初始值为2*/ 
}

2. counter-increment

L'attribut counter-increment est utilisé pour spécifier l'incrément d'un ou plusieurs CSS. valeur des compteurs. Il prend comme valeur un ou plusieurs identifiants précisant le nom du compteur à incrémenter.

Utiliser la syntaxe :

counter-increment: [ <标识符> <整数>? ]+ | none | inherit

Chaque nom de compteur (identifiant) peut être suivi d'une valeur facultative qui précise que pour chacun des éléments que nous numérotons Combien le compteur doit-il être incrémenté lorsque cela se produit. L'incrément par défaut est 1. Les entiers nuls et négatifs sont autorisés. Si un entier négatif est spécifié, le compteur est décrémenté.

L'attribut counter-increment doit être utilisé en conjonction avec l'attribut counter-reset. Jetons un coup d'œil à un exemple :

article {    /* 定义和初始化计数器 */
    counter-reset: section; /* 'section' 是计数器的名称 */
}
article h2 {    /* 每出现一次h2,计数器就增加1 */
    counter-increment: section; /* 相当于计数器增量：第1节； */
}

3. 🎜>

h2:before {    
    content: counter(section);
}

attribut CSS list-style-type sont également disponibles pour les compteurs. Cela signifie que vous pouvez créer des compteurs à chiffres décimaux, des compteurs affichés sous forme de caractères romains, de caractères alphabétiques faibles, etc. Voici tous les styles de compteur possibles :

ul li:before {    
content: counter(my-counter, lower-roman);
}

4. Fonction counters()

name参数也是要显示的计数器的名称。可以使用counter-reset属性来指定计数器的名称。

而counters()函数与counter(）函数（单数形式）区别在于：counters() 函数可以用于设置嵌套计数器。

嵌套计数器是用于为嵌套元素（如嵌套列表）提供自动编号。如果您要将计数器应用于嵌套列表，则可以对第一级项目进行编号，例如，1，2，3等。第二级列表项目将编号为1.1，1.2，1.3等。第三级项目将是1.1.1，1.1.2，1.1.3，1.2.1，1.2.2，1.2.3等。

string参数用作不同嵌套级别的数字之间的分隔符。例如，在'1.1.2'中，点（'.'）用于分隔不同的级别编号。如果我们使用该counters()函数将点指定为分隔符，则它可能如下所示：

content: counters(counterName, ".");

如果希望嵌套计数器由另一个字符分隔，例如，如果希望它们显示为“1-1-2”，则可以使用短划线而不是点作为字符串值：

content: counters(counterName, "-");

和counter(）函数一样，style参数是用来定义计数器的风格。默认情况下，计数器使用十进制数字格式化。具体关于style参数的设置可以参照counter(）函数的style参数。

以下是一个示例，指定嵌套计数器将使用lower-roman字符显示，并使用点作为分隔符：

ul li:before {    
   content: counters(my-counter, ".", lower-roman);
}

css计数器（counter）的示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Tester</title>
        <style type="text/css">
            body{
                counter-reset: section;
            }
            h1{
                counter-reset: subsection;
            }
             
            h1:before{
                counter-increment: section;
                content: counter(section) ".";
            }
             
            h3:before{
                counter-increment: subsection;
                content: counter(section) "." counter(subsection) " ";
            }
        </style>
    </head>
    <body>
        <h1>css计数器教程</h1>
        <h3>css计数器</h3>
        <h3>css计数器的相关属性</h3>
        <h3>示例说明</h3>
         
        <h1>css计数器教程</h1>
        <h3>css计数器</h3>
        <h3>css计数器的相关属性</h3>
        <h3>示例说明</h3>
    </body>
</html>

效果图：

总结：以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。

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!