css计数器

很多时候要是实现一行文字前面的序列号的话，可能会直接添加个新元素或者利用before伪元素实现。但如果是多行文字的序列号的话，就不是那么简单了。

恰好，css就有这么个计数器可以实现这个功能。

counter-reset:进行计数器的重置。
counter-increment:进行计数器的递增或递减。
counter():输出计数器。

就以上三个属性。但使用起来可不是这么简单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            /*counter-reset: dd tt;*/
            /*进行计数器的递增，可同时设置两个计数器*/
            counter-increment: dd tt;

        }
        div:before,div:after{
            /*counter-increment: dd tt;*/
            display: inline-block;
            width: 20px;
            height: 20px;
            margin: 5px;
            line-height: 20px;
            color: #fff;
            text-align: center;
            border-radius: 100%;
            background-color: #f00;
        }
        div:before{
            /*显示计数器*/
            content: counter(dd)
        }
        div:after{
            content: counter(tt);
        }
    </style>
</head>
<body>
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
</body>
</html>

以上的是同一级的计数器，没嵌套。

以下的是有三级的嵌套：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .reset{
            padding-left: 20px;
            counter-reset: num;
        }
        .counter{
            color: #666;
        }
        .counter:before{
            counter-increment: num;
            content: counters(num,'-');
            font-family: arial black;
        }
    </style>
</head>
<body>
    <div class="reset">
        <div class="counter">
            第一级
            <div class="reset">
                <div class="counter">第二级</div>
                <div class="counter">第二级
                    <div class="reset">
                        <div class="counter">第三级</div>
                        <div class="counter">第三级</div>
                        <div class="counter">第三级</div>
                    </div>
                </div>
                <div class="counter">第二级</div>
                <div class="counter">第二级
                    <div class="reset">
                        <div class="counter">第三级</div>
                        <div class="counter">第三级</div>
                        <div class="counter">第三级</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

详情可查看这篇文章

posted @ 2017-06-07 22:20  _Jo  阅读(179)  评论(0)  编辑  收藏  举报