CSS 2.1屬性
counter-increment
你是否經(jīng)常希望你可以讓一個有序列表或者一篇文章的所有標(biāo)題自動編號？不幸的是，目前尚未有CSS3屬性支持。但是在CSS 2.1中，counter-increment 提供了一個解決方案。這就意味著它已經(jīng)出現(xiàn)好些年了，而且在IE8中就已經(jīng)支持了。
配合:before 偽元素和content 屬性，counter-increment可以為所有的HTML標(biāo)簽添加自動的編號。即便是嵌套的編碼也是支持的。
示例
要給標(biāo)題編碼，先將計算器重設(shè)一下:
body {counter-reset: thecounter}
下面的樣式讓每一個<h1>標(biāo)題都有一個”Section”的前綴，然后其后面的數(shù)字自動的遞增1(這是默認(rèn)的，可以省略掉)，這里thecounter是計算器的名稱:
.counter h1:before {
counter-increment: thecounter 1;
content:"Section"counter(thecounter)":";
}
示例
對于一個嵌套編碼的列表，重設(shè)計數(shù)器，然后關(guān)掉<ol>的自動編碼，因?yàn)樗菬o嵌套的:
ol {
counter-reset: section;
list-style-type: none;
}
然后，每個<li>設(shè)置為自動編號，分割符是一個點(diǎn)(.)，后面跟著一個空格
li:before {
counter-increment: section;
content: counters(section,".")"";
}
HTML代碼：
<ol>
<li>item</li> <!-- 1 -->
<li>item <!-- 2 -->
<ol>
<li>item</li> <!-- 1.1 -->
<li>item</li> <!-- 1.2 -->
</ol>
</li>
<li>item</li> <!-- 3 -->
<ol>
瀏覽器支持: CSS 2.1.，所有的現(xiàn)代瀏覽器，IE 7+.
擴(kuò)展閱讀: W3C，CSS content, counter-increment 和 counter-reset詳解
出處：前端觀察
責(zé)任編輯：bluehearts
上一頁 CSS的未來:一些試驗(yàn)性CSS屬性 [5] 下一頁 CSS的未來:一些試驗(yàn)性CSS屬性 [7]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 6 頁 CSS的未來:一些試驗(yàn)性CSS屬性 [6]
