CSS计数器的使用

CSS计数器最初只能用于ul和ol元素，但在CSS2.1中新增的:before、:after伪元素选择器（CSS3中推荐的写法为::before、::after）可以使CSS计数器应用于任何一个元素。

一、和CSS计数器相关的属性或函数

常用的和CSS计数器相关的属性或函数有counter-reset、counter-increment、content、counter()、counters().

counter-reset   
//用于声明（或者说创建、定义）计数器；
//规定计数器的作用域，在哪个元素写入这条样式，哪个元素就是该计数器的作用域；
//任何一个计数器使用之前都必须先进行counter-reset，否则无法工作；
//格式：counter-reset: <name> [initial value]，其中name为计数器名称，initial value为初始值，该值可以为复数，默认为0；
//如果要在同一个定义域声明多个计数器，需将所有的计数器声明在同一个counter-reset内，eg:counter-reset: mycounter 1 yourcounter 0;

counter-increment
//用于部署计数器、规定计数步长；
//部署计数器，即规定该元素（伪元素）使用哪个计数器；
//格式：counter-increment: <name> [increment step]，其中name为计数器名称，increment step为计数步长，该值可以为复数，默认为1；
//eg:counter-increment: mycounter 1;

content
//一般用于::before、::after伪元素选择器，规定生成的内容；
//在本次讨论范围中，计数器生成的值就放置在content中；
//使用计数器同时还可以连接其他表达式或字符串；
//eg:content: "第"counter(mycounter)"章"；

counter()
//调用计数器
//作为content值的一部分；
//格式：counter(<name>[, list style type])，其中list style type和list-style-type样式同理，取list-style-type样式的值，默认为十进制阿拉伯数字；
//附：list-style-type样式可取的值： disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit；
//eg:counter(mycounter, lower-roman);

counters()
//递归调用计数器；
//用于实现类似Word中的多级目录功能；
//格式：counters(<name>[, link icon]),其中link icon为不同层级计数器的连接符；
/eg:counters(mycounter, ".")；

二、CSS计数器使用方法

1.counter()的使用方法

<style type="text/css">
    ul {
        counter-reset: mycounter 0;
        list-style-type: none;
    }
    li::before {
        counter-increment: mycounter;
        content: counter(mycounter)". ";    //这里引号中的内容为链接到计数器生成值末尾的字符串
    }
</style>
<ul>
    <li>元素</li>
    <li>元素</li>
    <li>元素</li>
    <li>元素</li>
</ul>

运行结果：

2.counters()的使用方法

counters()一般用于多级目录，它将递归的调用计数器。

<style type="text/css">
    ul {
        counter-reset: mycounter 0;
        list-style-type: none;
    }
    li::before {
        counter-increment: mycounter ;
        content: counters(mycounter,".")" ";
    }
</style>
<ul>
    <li>元素</li>
    <li>元素
        <ul>
            <li>元素</li>
            <li>元素
                <ul>
                    <li>元素</li>
                    <li>元素</li>
                </ul>
            </li>
            <li>元素</li>
            <li>元素</li>
        </ul>
    </li>
    <li>元素</li>
    <li>元素</li>
</ul>

三、再次注意

因为CSS的覆盖特性，后定义的同名样式将覆盖先定义的样式，因此在同一个作用域声明多个计数器时，不要使用类似下面的写法：

counter-reset: mycounter 0;
counter-reset: yourcounter 0;   //错误的写法

因为两条样式同名，第二条样式覆盖第一条样式，所以只有yourcounter计数器被声明，而mycounter计数器没有被声明，那么mycounter计数器将无法工作。

正确的写法是：

counter-reset: mycounter 0 yourcounter 0;