What is css counter (counter)

The content of this article is to introduce what a css counter (counter) is, so that everyone can simply understand the related properties of the css counter. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

What is a css counter?

The counter is a powerful tool provided by CSS3. It is a method that allows us to automatically number elements using CSS. It can be used to easily count any elements on the page and achieve functions similar to an ordered list. But compared with ordered lists, CSS counters can count any element and can also implement personalized counting. [Recommended related video tutorials: CSS3 tutorial]

Related properties of css counter

1, counter -reset

counter-reset attribute is used to define and initialize one or more CSS counters. It can take one or more identifiers as a value that specifies the name of the counter.

Usage syntax:

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

Each counter name can be followed by an optional value, which specifies the initial value of the counter.

Note:

1) The keywords none, inherit and initial cannot be used as counter names; the keywords none and inherit can be used as the value of the counter-reset attribute.

Setting none will unset the counter; setting inherit will inherit the counter-reset value from the element's parent element. The default value of the counter-reset attribute is none.

2), the initial value of the counter is not the first number/value when the counter is displayed.

This means that if you want the counter to start displaying from 1, you need to set the initial value in counter-reset to zero. 0 is the default initial value, so if you omit it, it will reset to zero by default; counter-reset allows negative values. Therefore, if you want the counter to start displaying from zero, you can set its initial value to -1.

Example:

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

The counter-increment attribute is used to specify the increment value of one or more CSS counters. It takes as a value one or more identifiers specifying the name of the counter to be incremented.

Usage syntax:

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

Each counter name (identifier) ​​can be followed by an optional value that specifies that for each occurrence of the element we are numbering How much does the counter need to be incremented when. The default increment is 1. Zero and negative integers are allowed. If a negative integer is specified, the counter is decremented.

The counter-increment attribute must be used in conjunction with the counter-reset attribute. Let’s take a look at an example:

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

3. counter() function

## The #counter() function must be used with the content attribute to display CSS counters. It takes a CSS counter name as a parameter and passes it as a value to the content property, which uses the :before pseudo-element to display the counter as generated content.

Example:

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

The counter() function has two forms: counter(name) and counter(name, style).

The name parameter is the name of the counter to be displayed; use the counter-reset attribute to specify the name of the counter.

The style parameter is used to define the style of the counter. By default, counters are formatted using decimal numbers, that is, the counter generates content in the form of numbers; however, all available styles of the

css list-style-type attribute are also available for counters. This means you can create decimal digit counters, counters displayed as Roman characters, low alphabetic characters, etc. Here are all possible counter styles:

disc: solid circle style

circle: hollow circle style

square: solid square style

decimal: arabic Number style

lower-roman: Lowercase Roman numeral style

upper-roman: Uppercase Roman numeral style

lower-alpha: Lowercase English letter style

upper-alpha: uppercase English letter style

none: do not use bullets

armenianl: traditional Armenian number style

cjk-ideographic: light white ideographic number style

georgian: traditional Georgian number style

lower-greek: basic Greek lowercase letter style

hebrew: traditional Hebrew number style

hiragana ：Japanese Hiragana character style

hiragana-iroha：Japanese Hiragana serial number style

katakana：Japanese Katakana character style

katakana-iroha：Japanese Katakana serial number style

lower-latin: lowercase Latin letter style

upper-latin: uppercase Latin letter style

The following is an example of specifying a display counter using lower-roman characters:

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

4. counters() function

The counters() function must also be used with the content attribute to display CSS counters. Like the counter() function, the counters() function is passed as a value to the content attribute; the content attribute then displays the counter as generated content using the :before pseudo-element.

The counters() function also has two forms: counters(name, string) and counters(name, string, style).

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 id="css计数器教程">css计数器教程</h1>
        <h3 id="css计数器">css计数器</h3>
        <h3 id="css计数器的相关属性">css计数器的相关属性</h3>
        <h3 id="示例说明">示例说明</h3>
         
        <h1 id="css计数器教程">css计数器教程</h1>
        <h3 id="css计数器">css计数器</h3>
        <h3 id="css计数器的相关属性">css计数器的相关属性</h3>
        <h3 id="示例说明">示例说明</h3>
    </body>
</html>

效果图：

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

The above is the detailed content of What is css counter (counter). For more information, please follow other related articles on the PHP Chinese website!