css3中计数器的使用

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

三、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同时使用，符合起来还能达成复合序号的效果

链接: https://fly63.com/article/detial/1246