如何在 CSS 中使用 counter-increment 属性创建编号？

本文将让您了解如何在 CSS 中使用 counter-reset 和 counter-increment 属性。我们可以使用 counter-reset 和 counter-increment 属性来为网页中的 HTML 元素设置计数。

需要使用counter-increment 属性：

此属性可用于设置计数器的递增/递减值。为了正确组织数据，有必要对其进行格式化以使网页更具吸引力。我们可以通过多种方式为 HTML 元素设置计数。最简单的方法是我们可以手动设置数字，这不是一个好习惯。我们可以使用可以是有序列表或无序列表的 HTML 列表。虽然，在 CSS 计数器属性上使用列表有一些缺点，如下所示：

• 我们可以使用 CSS 计数器来设置复杂列表的计数。
• 用户可以将自定义设计添加到计数中，而编号列表不允许自定义。
• 用户可以设置计数器的起始点。
• 最有用的功能是我们可以使用 CSS 计数器设置增量值，而编号列表仅将值增加 1。

CSS 计数器有多种编号方式。

句法：

• 初始化跨度计数变量。

  counter-reset: Span-count;

• 增加跨度计数变量。

  counter-increment: Span-count;

• 向内容添加计数。

  content: counter(Span-count);

属性： CSS 计数器包含以下属性：

• Counter-reset：初始化计数器变量。计数器变量的默认值为 0。此外，我们可以手动设置它的值。在网页中使用 counter-increment 之前，需要创建 counter-reset 变量。
• 计数器增量：增加计数器变量。默认增量值为1。我们也可以手动设置。
• 计数器（counter_variable）：此函数将计数器变量作为参数。它将计数添加到 HTML 元素之前或之后。
• Counters(counter_variable)：与counter()函数相同。我们可以使用它来实现嵌套计数器。
• 内容：将计数设置为 HTML 元素的内容。

示例：这是一个简单的示例，演示如何使用 CSS 计数器。

HTML

  

    
    

  

    GeeksforGeeks 

    GFG

  

输出：

CSS 计数器

更改 CSS 计数器的起始值和增量值：CSS 计数器的默认起始值和增量值分别为 0 和 1。我们可以通过设置 counter-reset 变量的值来改变默认的起始值。无论我们为 counter-reset 变量设置什么值，它都会从初始值和增量值之和的值开始计数。例如，如果我们将 counter-reset 变量初始化为 1，并且 counter-increment 为 2，它将从 3 开始编号。

句法：

counter-reset: Span-count -1;

句法：

要更改 CSS 计数器的增量值，我们需要设置 counter-increment 属性的值。

counter-increment: Span-count 2;

示例：此代码演示如何更改 counter-reset 和 counter-increment 变量的默认值。

HTML

  

    
    

  
 
    GeeksforGeeks
 
    GFG 

  

输出：

使用 CSS Counter 将计数器增加 2

设置计数格式： CSS 计数器的另一个有趣特性是它提供了不同的计数格式。计数器的默认格式是十进制格式。我们可以将默认格式更改为 lower-latin、lower-greek 和 lower-roman。

语法：我们只需要改变如下所示的内容属性，来改变计数的格式。

content: counter(Span-count, values);

属性值：

• 十进制：表示数值 （例如，1,2,3,..）  
• lower-latin：将字母设置为计数。
• lower-greek：将希腊符号设置为计数。
• lower-roman：将罗马数字设置为计数。

示例：此示例演示如何更改 CSS 计数器的计数格式。

HTML

  

    
    

  
 
    GeeksforGeeks
 
    GFG 

  

输出：

将计数器格式设置为小写罗马字

嵌套计数器：计数器中的计数器称为嵌套计数器。嵌套计数器用于创建标题和子标题。使用 CSS 嵌套计数器可以轻松代替复杂的编号列表。在对嵌套数据进行编号时，我们需要添加 1.1、1.2、1.1.2 等计数。我们可以使用 CSS 计数器来完成同样的事情。在这里，我们将了解 counters()函数的用法。

示例：此示例演示了使用 CSS 计数器的嵌套计数。当一个新的 div 将启动时，counter-reset 变量会重新创建自己并使用起始值重新初始化。

HTML

  

    
    

  

    

        
HTML List
        

            
Ordered List
            
Unordered List
        
        
Dictionary
    

  

输出：

嵌套计数器