利用css实现多级计数，比如1/1.1/1.1.1这种层层嵌套的计数，主要利用到counter-reset/counter-increment/counter/content/：before。

一、标题类多级计数，比如下面的效果：

CSS代码如下： 

body{
        counter-reset: chapter section subsec;}h1{
        counter-reset: section subsec;}h2{
        counter-reset: subsec;}h1:before{
        counter-increment: chapter;    content: counter(chapter,cjk-ideographic)"、";}h2:before{
        counter-increment: section;    content: counter(chapter)"."counter(section)" ";}h3:before{
        counter-increment: subsec;    content: counter(chapter)"."counter(section)"."counter(subsec)" ";}

总结说明：

　　1、在每一级标题的上级（父元素），比如h1的上级为body，那么在body上重置body下的所有计数器，h2的上级为h1，在h1上重置h1子元素的所有计数器。

　　2、在每一层的:before伪类上递增该层计数器，比如h1的计数器为chapter，那么递增该计数器，可接受第二个参数表示步长，默认为1.

　　3、在每一层的:before伪类上利用content和counter（计数器）显示从h1到该层的计数器，使用“.”分隔，也可以使用其他的分隔符，比如空格或者“-”。

　　4、counter（计数器，type）第二个参数是list-style-type的关键字，默认为decimal。cjk-ideographic将显示为一二三这种形式。

二、嵌套的多级列表实现多级计数

形如以下的结构：

     
        
      
绪论
        
      
正文            
       
                
        
正文一
                
        
正文二
                
        
正文三                    
         
                        
          
正文三内容一
                        
          
正文三内容二
                        
          
正文三内容三
                    
         
                
                
        
正文四                    
         
                        
          
正文四内容一
                        
          
正文四内容二
                        
          
正文四内容三
                    
         
                
            
       
        
        
      
总结
    
     

正常显示如下：

如果为每个ol建一个类或者id，利用上面的方法也可以实现多级计数。但是有一种更快捷的方法。

CSS代码如下：

ol{
        list-style: none;    counter-reset: ordered;}li:before{
        counter-increment: ordered;    content: counters(ordered,".")" ";}

效果如下：

总结说明：

　　1、根据CSS权威指南，计数器具有作用域的概念，每层嵌套都会为给定计数器创建一个新的作用域，即每层都创建了一个新的ordered实例。

　　2、counters（ordered，“.”）将把各作用域的ordered计数器串起来，以.相连。可接受第三个参数，为list-style-type关键字，每层显示样式都会变为关键字规定样式。

　　3、要为每层应用不同的关键字样式，可能还是需要用方法一。