css3里有个很强大的功能，就是计算器，使用它可以很方便对页面中的任意元素进行计数，实现类似于有序列表的功能。与有序列表相比，突出特性在于可以对任意元素计数，同时实现个性化计数。
简而言之，计数器就是采用css给html元素自动生成编号。其本质上是由css维护的变量，其值可以通过css规则递增以跟踪它们的使用次数。
一、css计数器相关属性：
1.counter-reset
定义计数器，包括初始值，作用域等； 值为计数器的名称。默认情况下，计数器从0开始。此属性还可用于将其值更改为任何特定数字。记住在必须在父节点初始化你需要的计数器，不然序号肯定是不对的。当元素display：none时，该属性失效。
它的值包括两部分：第一部分为计数器的名字；第二部分为计数器的起始值（默认为0），counter-reset还可以同时声明多个计数器比如：
counter-reset: count 0 /*标识计数器count从1开始*/ counter-reset: count2 2 /*标识计数器count2 从3开始*/ counter-reset: count1 0 count3 0 count4 0 /*声明了三个计数器，count1，count2，count3*/
2.counter-increment
用于可计数的元素中，设置计数器的增数；
他的值也包括两部分：第一个为计数器的名字，即counter-reset设置好的名字，第二个值标识递增的值（默认为1），比如：
counter-increment: count 1 /*表明每次递增 1*/ counter-increment：count 2 /*表明每次递增 2*/
3.counter()
content和counter需要搭配使用，content主要是跟 :after, :before,::after,::before来搭配用的，counter主要是给元素插入计数器的值。 语法如下：
content:counter(name)
counter(name,list-style-type)
counters(name,string)
counters(name,string,list-style-type)
name就是你计数器的名字。
string为在计数器之间的字符串。
list-style-type可以用来指定计数器的样式，比如可以用1，2，3，4来计数，也能用a,b,c,d来计数 。list-style-type样式如下：
disc:css1默认值。实心圆
circle:css1空心圆
square:css1实心方块
decimal:css1阿拉伯数字
lower-roman:css1小写罗马数字
upper-roman:CSS1大写罗马数字
lower-alpha:CSS1小写英文字母
upper-alpha:CSS1大写英文字母
none:CSS1不使用项目符号
armenianl:CSS2未支持。传统的亚美尼亚数字
cjk-ideographic:CSS2未支持。浅白的表意数字
georgian:CSS2未支持。传统的乔治数字
lower-greek:CSS2未支持。基本的希腊小写字母
hebrew:CSS2未支持。传统的希伯莱数字
hiragana:CSS2未支持。日文平假名字符
hiragana-iroha:CSS2未支持。日文平假名序号
katakana:CSS2未支持。日文片假名字符
katakana-iroha:CSS2未支持。日文片假名序号
lower-latin:CSS2未支持。小写拉丁字母
upper-latin:CSS2未支持。大写拉丁字母例子：
content:"F." counter(counter);在计数器前面添加‘F.’ content:counter(counter,lower-alpha); 指定计数器的列表样式； content:counters( counter ,".") " "; 在计数器之间加点号，同时在计数器末尾加一个空格； content:counters( counter ,".",lower-roman) " ";定义计数器为小写罗马数字格式，同时加点号，空格；
二、css计数器例子
创建计数器步骤：
第一步：声明计数器:要使用CSS Counters生成自动计数器，首先就是通过counter-reset属性先声明一个计数器名称。
第二步：设置计数器：counter-reset只是定义了一个计数器标识符，在实际使用中，需要通过counter-increment属性来控制计数器的增减。
第三步：显示计数器：最后一步，就是如何显示计数器了。显示计数器需要通过:before、content和counter()：来进行设置。
html:
<ul>
<li>List item</li>
<li>List item</li>
<ul>
<li>List item</li>
</ul>
</ul>
css:
ul {
counter-reset: counter;
}
li::before {
counter-increment: counter;
content: counters(counter, '.') ': ';
}
效果如下：
-
List item List item List item
新片场https://www.wode007.com/sites/73286.html 傲视网https://www.wode007.com/sites/73285.html
三、css计数器中常见问题
怎么让计数器倒序计数?
只要把增量counter-increment为负数即可。
怎么改变计数器的计数符号?
counter()的默认样式为decimal，即数字。
我们可以根据需要修改成其他样式，例如：upper-roman（罗马数字）
计数器的兼容性？
目前主流浏览器基本都支持counter-reset属性。
注意： 因为在IE6 和IE7 以及IE8的IE7兼容模式中，:before 和:after 都不被支持，所以可以认为它们都不支持content 属性，测试也就毫无意义，所以这个列表将IE6、IE7和IE8的IE7兼容模式忽略。IE8只有指定!DOCTYPE才支持counter-reset属性
CSS计数器除了用来计数还有什么其他的作用？
CSS计数器对于生成大纲列表特别有用，因为计数器的新实例是在子元素中自动创建的。使用counters() 函数，可以在不同级别的嵌套计数器之间插入分隔文本。
除了生成篇数、章节和段落以外，CSS计数器还被应用于计算数据类型的小游戏当中。
CSS计数器与display:none的使用会造成什么影响？
一个元素，如果设置了counter-increment, 但是其display的属性值是none或者含有hidden属性（针对支持浏览器），则此计数值是不会增加的。而visibility:hidden以及其他声明不会有此现象。
counter计数器能和ol、ul同时使用吗？
counter计数器可以和ol、ul同时使用，符合起来还能达成复合序号的效果