CSS Counters

2019独角兽企业重金招聘Python工程师标准>>>

利用css counters 函数，可以实现对内容自动编号，计数等

下面用例子说明：

1 编号

html

<section>
    <h1>example list</h1>
    <p class="example">
        Pellentesque habitant morbi tristique senectus et netus et malesuada.Pellentesque habitant morbi tristique senectus et netus et
    </p>
    <p>
        Pellentesque habitant morbi tristique senectus et netus et malesuada.Pellentesque habitant morbi tristique senectus et netus et
    </p>
    <p class="example">
        Pellentesque habitant morbi tristique senectus et netus et malesuada.Pellentesque habitant morbi tristique senectus et netus et
    </p>
    <p>
        Pellentesque habitant morbi tristique senectus et netus et malesuada.Pellentesque habitant morbi tristique senectus et netus et
    </p>
</section>
<section>
    <h1>issue list</h1>
    <p class="issue">
        Pellentesque habitant morbi tristique senectus et netus et malesuada.Pellentesque habitant morbi tristique senectus et netus et
    </p>
    <p>
        Pellentesque habitant morbi tristique senectus et netus et malesuada.Pellentesque habitant morbi tristique senectus et netus et
    </p>
    <p class="issue">
        Pellentesque habitant morbi tristique senectus et netus et malesuada.Pellentesque habitant morbi tristique senectus et netus et
    </p>
    <p>
        Pellentesque habitant morbi tristique senectus et netus et malesuada.Pellentesque habitant morbi tristique senectus et netus et
    </p>
</section>

css

        section{
            counter-reset: example issue;
        }
        .example{
            counter-increment: example;
            background: lightblue;
        }
        .example::before{
            content:'example 'counter(example);
            color: orchid;
            font-weight: bold;
            display: block;
            text-transform: uppercase;
        }

        .issue{
            counter-increment: issue;
            background: cadetblue;
        }

        .issue::before{
            content: 'issue 'counter(issue,decimal);
            color: wheat;
            font-weight: bold;
            display: block;
            text-transform: uppercase;
        }
        p{
            padding: 1em;
        }

2 计数

html:

<h1>Selection CSS Counter</h1>
<section class="characters">
    <h2>Select characters:</h2>
    <input id="b" type="checkbox"><label for="b">Relm</label>
    <input id="c" type="checkbox"><label for="c">Mog</label>
    <input id="e" type="checkbox"><label for="e">Celes</label>
    <input id="g" type="checkbox"><label for="g">Edgar</label>
    <input id="i" type="checkbox"><label for="i">Gau</label>
    <input id="k" type="checkbox"><label for="k">Terra</label>
    <input id="l" type="checkbox"><label for="l">Locke</label>
    <input id="o" type="checkbox"><label for="o">Cyan</label>
</section>
<section class="total">
    Total selected:
</section>

css:

/* counters */
        body{
            counter-reset: characters;
        }
        input:checked{
            counter-increment: characters;
        }

        .total::after{
            content:counter(characters);
        }


        /* pretty style */
        body {
            margin: 32px;
            font: 700 32px/1 'Droid Sans', sans-serif;
            color: #fff;
            background-color: #3f584e;
        }


        section {
            margin-bottom: 16px;
            padding: 16px;
            border-radius: 4px;
            overflow: hidden;
            background-color: rgba(255, 255, 255, .1);
        }
        input {
            position: absolute;
            left: -9999px;
        }

        label {
            float: left;
            margin: 8px;
            padding: 16px;
            border-radius: 4px;
            border: solid 2px rgba(255, 255, 255, .4);
            background-color: rgba(255, 255, 255, .2);
            cursor: pointer;
            transition: all .1s;
        }

        input:checked+label{
            border: solid 2px #ffffff;
            background-color: rgba(255, 255, 255, .4);
            box-shadow: 0 0 10px #fff;
        }

 

参考文献：https://www.sitepoint.com/8-clever-tricks-with-css-functions/?utm_source=html5weekly&utm_medium=email

转载于:https://my.oschina.net/u/2510955/blog/748539