CSS计数器精讲

创新互联公司是一家专注于成都网站设计、成都网站建设、外贸网站建设与策划设计,天心网站建设哪家好?创新互联公司做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:天心等地区。天心做网站价格咨询:028-86922220

• counter-reset：创建或者重置计数器；
• counter-increment：递增变量；
• content：插入生成的内容；
• counter() 或 counters()：将计数器的值添加到元素。

下面我们就来看一下 CSS 中的计数器是如何使用的。

初始化计数器

要使用计数器首先需要使用 counter-reset 属性来创建一个计数器，这一过程便叫做初始化计数器。counter-reset 属性的语法格式如下：

counter-reset：none | [ ]

参数说明如下：

• none：阻止计数器复位；
• ：定义计数器的名称；
• ：定义计数器的起始值，默认值为 0，可以为负值。

计数器自增

初始化计数器后，可以通过 counter-increment 属性来指定计数器何时自增，语法格式如下：

counter-increment：none | [ ]

参数说明如下：

• none：阻止计数器增加；
• ：定义要自增的计数器名称；
• ：定义计数器每次增加的数值，默认值为 1，可以为负值。

显示计数器

最后，就是如何显示计数器了。要显示计数器您可以使用 counter() 或 counters() 函数，这两个函数的语法格式如下：

counter(name)
counters(name, string, list-style-type)

参数说明如下：

• name：计数器的名称；
• string：当计数器嵌套使用时，用来拼接的字符串；
• list-style-type：计数器显示的风格，可以是 CSS 中允许的任何《list-style-type 属性》的值。

下面通过一个简单的示例来演示计数器的使用：

    


    
程序设计语言
    
HTML and CSS
    
JavaScript
    
PHP
    
Java

    
数据库管理系统
    
MySQL
    
MariaDB
    
PostgreSQL
    
Oracle

运行结果如下图所示：

注意：在使用 CSS 计数器之前，必须使用 counter-reset 创建计数器。

计数器嵌套

另外，计数器还可以嵌套使用，而且使用 counters() 函数可以在不同级别的嵌套计数器之间插入一个字符串，如下例所示：

    


    

        
item
        
item
            

                
item
                
item
                
item
                    

                        
item
                        
item
                    
                
                
item
                    

                        
item
                        
item
                        
item
                    
                
            
        
        
item
        
item
    

运行结果如下图所示：

通过以上示例我们不难看出，使用 CSS 计数器可以在不借助其它编程语言（例如 JavaScript、PHP 等）的情况下实现简单的计数功能，当需要为某些内容添加序号时非常适用。