萬萬沒想到，寫了快三年前端，有不會用的css，居然還有完全沒聽過、見過的css屬性，而且還是CSS2的內容！ 關於counter-reset、content-increment兩個屬性的詳解可以參看張鑫旭的博文：《CSS計數器(序列數字字元自動遞增)詳解》，這裡做個記錄，寫個demo 相容情況還不錯 ...
萬萬沒想到，寫了快三年前端，有不會用的css，居然還有完全沒聽過、見過的css屬性，而且還是CSS2的內容！
關於counter-reset、content-increment兩個屬性的詳解可以參看張鑫旭的博文：《CSS計數器(序列數字字元自動遞增)詳解》，這裡做個記錄，寫個demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>content-increment</title>
<style>
.test li {margin:16px 0;padding:0;list-style:none;}
.test li li:before{color:#f00;font-family:'Microsoft YaHei';}
.counter1 li{counter-increment:testname;}
.counter1 li:before{content:counter(testname)".";}
.counter2 li{counter-increment:testname2 2;}
.counter2 li:before{content:counter(testname2)"/";}
.counter3 li{counter-increment:testname3 -1;}
.counter3 li:before{content:counter(testname3)")";}
.counter4 li{counter-increment:testname4;}
.counter4 li:before{content:counter(testname4, upper-roman)". ";}
.counter5 {counter-reset:testname5;}
.counter5 li:before{content: counters(testname5, '-') '. '; counter-increment: testname5;color:blue;font-family: 'Microsoft YaHei';}
</style>
</head>
<body>
<ul class="test">
<li class="counter1">
<strong>預設時的計數器：</strong>
<ul>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ul>
</li>
<li class="counter2">
<strong>修改計數器每次增加的值為2：</strong>
<ul>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ul>
</li>
<li class="counter3">
<strong>修改計數器每次增加的值為-1：</strong>
<ul>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ul>
</li>
<li class="counter4">
<strong>修改計數器以羅馬字元顯示：</strong>
<ul>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ul>
</li>
</ul>
<ul class="test counter5">
<strong>計數器以嵌套計數顯示:</strong>
<li>父級</li>
<li>父級
<ul class="counter5">
<li>子級1</li>
<li>子級2</li>
<li>子級3</li>
</ul>
</li>
<li>父級
<ul class="counter5">
<li>子級1</li>
<li>子級2</li>
<li>子級3</li>
</ul>
</li>
<li>父級</li>
</ul>
</body>
</html>
相容情況還不錯：
