counter-increment自动编号

by noahua

HTML

<div class="container">
        <h1>heading 1</h1>
        <h2>heading 2</h2>
        <h3>heading 3</h3>
        <h2>heading 2</h2>
        <h2>heading 2</h2>
    </div>

CSS

.container{counter-reset:section-1,section-2,section-3,section-4;}
        .container h1{counter-increment:section-1;counter-reset:section-2,section-3,section-4}
        .container h2{counter-increment:section-2;counter-reset:section-3,section-4}
        .container h3{counter-increment:section-3;counter-reset:section-4}
        .container h4{counter-increment:section-4;}

        .container h1:before{content:counter(section-1) ". ";}
        .container h2:before{content:counter(section-1) ". " counter(section-2);}
        .container h3:before{content:counter(section-1) ". " counter(section-2) ". " counter(section-3);}
        .container h4:before{content:counter(section-1) ". " counter(section-2) ". " counter(section-3) ". " counter(section-4);}