如何将内容设置为计数器？

任务是将内容设置为计数器。 CSS 计数器区域单元由 CSS 维护的“变量” ，其值也由 CSS 规则递增(以跟踪它们被使用的次数)。计数器允许您管理由其在文档中的位置所支持的内容的外观。

将内容设置为计数器的方法：

CSS 计数器像“变量”这样的区域单位。变量值可以通过 CSS 规则递增(可以跟踪它们被使用的百分比)。要使用 CSS 计数器，首先应该使用计数器重置来创建它，并且要使用 CSS 计数器，我们将使用以下属性：

• counter-reset：创建或重置计数器
• counter-increment：增加一个计数器值
• 内容：插入生成的内容
• counter() 或 counters()函数：将计数器的值添加到组件中

计数器下的计数器(嵌套计数器)：

由于计数器的替换实例是在子部件中机械创建的，因此计数器可能有助于形成打印列表。

示例 1：这里我们倾向于使用 counters() 执行在完全不同级别的嵌套计数器之间插入字符串：

HTML

  

    

  

  
    

        
GFG Supreme


        
GFG Extreme
            

                

                
Superb


                
Marvellous


                
Mind Blowing
                    

                        

                        
Success


                        
Extraordinary


                        
Excellent
                    
                


                
Fabulous
            
        


        
GFG Stream


        
GFG Marine
    

  

输出：

例 2：这是一个设置计数器的例子，这里计数器的值加一并连接到每个部分的开头：

HTML

  

    

  

    
  
    
Setting up the content as a counter in CSS Counters:
    
GFG Extreme
    
GFG Supreme
    
GFG Stream
  

  

输出：

例3：这是一个设置计数器的例子，这里计数器的值加一并连接到每个部分的开头，同时它也增加了subsection的值：

HTML

  

    

  

    
  
    
Setting up the content as a counter in CSS Counters:
    
GFG Supreme:
    Superb
    Success
  
    
GFG Extreme:
    Extraordinary
    Excellent
  
    
GFG Marine:
    Marvellous
    Mind Blowing
  

  

输出：