counter-reset属性和counter-increment属性

1、counter-reset 属性
用法：counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。

说明：利用这个属性，计数器可以设置或重置为任何值，可以是正值或负值。如果没有提供 number，则默认为 0。

注释：如果使用 “display: none”，则无法重置计数器。如果使用 “visibility: hidden”，则可以重置计数器。

2、counter-increment 属性
用法：counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。

说明：利用这个属性，计数器可以递增（或递减）某个值，这可以是正值或负值。如果没有提供 number 值，则默认为 1。

注释：如果使用了 “display: none”，则无法增加计数。如使用 “visibility: hidden”，则可增加计数。

css部分   

  li {

            list-style-type: none;
            float: left;
            counter-increment: list;
        }
        
        /*.doc {
            counter-reset: list; // 他会告诉浏览器每个li元素进行递增计数，但是不会将数字展示出来
        }*/
        .doc li:before {
           
            /*counter-reset: list;*/
            content: counter(list);
            border: 0;
            float: left;
            width: 1.6em;
            height: 1.6em;
            -moz-border-radius: .8em;
            -webkit-border-radius: .8em;
            border-radius: .8em;
            /*background: #87B3CE;*/
            background: hsla(203, 78%, 36%, 1);
            text-align: center;
            text-shadow: 0 1px 0 hsla(0, 0%, 0%, .6);
            margin-left: 8px;

        }

body部分

<ul class="doc">
    <li><a href="#dir1">dir1</a></li>
    <li><a href="#dir2">dir2</a></li>
    <li><a href="#dir3">dir3</a></li>
    <li><a href="#dir4">dir4</a></li>
    <li><a href="#dir5">dir5</a></li>
    <li><a href="#dir6">dir6</a></li>
    <li><a href="#dir7">dir7</a></li>
 
</ul>

效果图如下