css3 计数器（css counters）可以允许我们使用css对页面的 任意元素进行计数，实现类似于有序列表 的功能。
与有序列表相比，它的突出特性在于可以对任意元素计数，同时实现个性化计数。
计数器相关属性一览：
属性 属性说明
counter-reset 定义计数器，包括初始值、作用域等
counter-increment 设置计数器的增数
content 早::before和::after中生成内容
counter() 在content属性中使用，用来调用计数器
@counter-style 自定义列表样式
语法
counter-reset ：[?]+|none|inherit
含义
    用来定义计数器的初值和作用域，默认值为none。
     :计数器名称
     :计数器的初始值
     当元素display为none时，该属性失效
计数器定义方式解析
代码 代码解析
counter-reset:countera 定义计数器countera,初始值为默认值0
counter-reset:countera 6; 定义计数器countera,初始值为6
counter-reset:countera 4,counterb; 定义计数器countera、counterb,初始值分别为4和0
counter-reset:countera 4，counterb 2; 定义计数器countera、counterb，初始值分别为4和2
语法
counter-increment:[?]+|none
含义
   用来增数计数器，默认值为none（阻止计数器增加）
   ：需要增数的计数器名称
      ：计数器增数的值，可以为负值。
   我们可以同时增数多个计数器
   当元素display为none时，该属性失效。
计数器增数方式解析
代码 代码解析
counter-increment:countera 增数计数器countera,每次增加1
counter-increment:countera 2 增数计数器counterb,每次增加2
counter-increment:countera 2,counterb -1 同时增数计数器countera、counterb，分别加2、-1
语法
   content ：[]+
    = counter(name)|counter(name,list-style-type)|counters(name,string)|
               counters(name,string,list-style-type)
含义
   使用计数器，需要结合::before和::after使用。可以同时使用多个计数器。
计数器使用方式解析
代码 代码解析
content:fig. counter(imgcounter); 混合字符串和计数器imgcounter
content:fig. counter(imgcounter,lower-alpha) 指定计数器的列表格式
content:counters(section,.) ;  在计数器之间加上点号，同时在计数器最加上一个空格
content:counters(section,.,lower-roman) ; 定义计数器为小写罗马数字格式，同时加点号，空格
语法格式
@counter-style counterstylename{
     system:算法；
     range:使用范围;
     symbols:符合;or additive-symbols:符号;
     prefix:前缀;suffix:后缀;
     pad：补零（eg.01,02,03）;
     negative:负数策略：
     fallback:出错后的默认值;
     speakas:语音策略;
}
自定义counter style示例
@counter-style cjk-heavenly-stem{
    system:alphabetic;
      symbols:\7532 \4e59 \4e19 \4e01 \620a \5df1 \5e9a \8f9b \58ec \7678;
/*甲 乙 丙 丁 戊 己 庚 辛 壬 葵*/
    suffix:、;
}