css-列表或標題的多級計數

利用css實現多級計數，比如1/1.1/1.1.1這種層層嵌套的計數，主要利用到counter-reset/counter-increment/counter/content/：before。

一、標題類多級計數，比如下面的效果：

CSS代碼如下： 

body{ counter-reset: chapter section subsec;
} h1{ counter-reset: section subsec;
} h2{ counter-reset: subsec;
} h1:before{ counter-increment: chapter; content: counter(chapter,cjk-ideographic)"、";
} h2:before{ counter-increment: section; content: counter(chapter)"."counter(section)" ";
} h3:before{ counter-increment: subsec; content: counter(chapter)"."counter(section)"."counter(subsec)" ";
}

總結說明：

　　1、在每一級標題的上級（父元素），比如h1的上級為body，那么在body上重置body下的所有計數器，h2的上級為h1，在h1上重置h1子元素的所有計數器。

　　2、在每一層的:before偽類上遞增該層計數器，比如h1的計數器為chapter，那么遞增該計數器，可接受第二個參數表示步長，默認為1.

　　3、在每一層的:before偽類上利用content和counter（計數器）顯示從h1到該層的計數器，使用“.”分隔，也可以使用其他的分隔符，比如空格或者“-”。

　　4、counter（計數器，type）第二個參數是list-style-type的關鍵字，默認為decimal。cjk-ideographic將顯示為一二三這種形式。

二、嵌套的多級列表實現多級計數

形如以下的結構：

    <ol>
        <li>緒論</li>
        <li>正文 <ol>
                <li>正文一</li>
                <li>正文二</li>
                <li>正文三 <ol>
                        <li>正文三內容一</li>
                        <li>正文三內容二</li>
                        <li>正文三內容三</li>
                    </ol>
                </li>
                <li>正文四 <ol>
                        <li>正文四內容一</li>
                        <li>正文四內容二</li>
                        <li>正文四內容三</li>
                    </ol>
                </li>
            </ol>
        </li>
        <li>總結</li>
    </ol>

正常顯示如下：

如果為每個ol建一個類或者id，利用上面的方法也可以實現多級計數。但是有一種更快捷的方法。

CSS代碼如下：

ol{
 list-style: none; counter-reset: ordered;
} li:before{ counter-increment: ordered; content: counters(ordered,".")" ";
}

效果如下：

總結說明：

　　1、根據CSS權威指南，計數器具有作用域的概念，每層嵌套都會為給定計數器創建一個新的作用域，即每層都創建了一個新的ordered實例。

　　2、counters（ordered，“.”）將把各作用域的ordered計數器串起來，以.相連。可接受第三個參數，為list-style-type關鍵字，每層顯示樣式都會變為關鍵字規定樣式。

　　3、要為每層應用不同的關鍵字樣式，可能還是需要用方法一。