這兩個特徵用在計數器，作文章章節的自動編號。IE6 沒支援計數器；IE8, Firefox3.0, Safari, Chrome 都有支援。
宣告重設 計數器的條件；如果一個條件式同時增加與重設計數器時，會先重設計數器再增加其值。可設定的值有：
- identifier integer：指定計數器名稱與整數重設值。可以不設重設值，用預設的值 0。可以一次宣告多個計數器名稱與其重設值。
- none：無計數器。
- inherit：繼承父元素的特徵值。
讀取計數器值的語法是：
counter(計數器名稱, list-style-type)
list-style-type 指定編號的型態；可不設 list-style-type，使用預設的數字編號。可用在 content 之後，輸出計數器的值。
- 風格用法：
<style type='text/css'>
.rst {counter-reset: ctr1 3 ctr2 7 ctr3 101;
counter-increment: ctr3 7;
}
.rst SPAN:before
{content: counter(ctr1, upper-roman)' / '
counter(ctr2, lower-greek)' / '
counter(ctr3)' / ';
color:red
}
</style>
<div class='rst'>
<span>輸出計數器的值</span>
</div> - 執行結果：
輸出計數器的值
宣告增加計數器的條件，可設定的值有：
- identifier integer：指定計數器名稱與整數增加值。可以不設增加值，用預設的值 1。可以一次宣告多個計數器名稱與其增加值。可用 0 與負值。
- none：無計數器。
- inherit：繼承父元素的特徵值。
如果一個條件式同時改變計數器值，又要取其值，則會先改變其值。同一個元素要重設多個計數器時，要寫在一個條件式中；如果寫在多個條件式，則後面的條件式會取代前面的條件式，造成前面的條件式沒有執行。
測試一個計數器。一個元素被設為 display:none，則該元素對計數器沒有影響。
- 風格用法：
<style type='text/css'>
.cls H3 {counter-reset: myctr 3;}
.cls P:before {content: "《"counter(myctr, upper-roman)"》";
counter-increment: myctr 2;
color:red;
}
</style>
<div class='cls'>
<h3>子曰：</h3>
<p>學而時習之，不亦說乎？</p>
<h3 style='display:none'>子曰：</h3>
<p>有朋自遠方來，不亦樂乎？</p>
<h3>子曰：</h3>
<p>人不知而不慍，不亦君子乎？</p>
</div> - 執行結果：
子曰：
學而時習之，不亦說乎？
子曰：
有朋自遠方來，不亦樂乎？
子曰：
人不知而不慍，不亦君子乎？
測試三個計數器。下面設了三個計數器，所以看起來挺複雜的，細心看懂就全懂了。
- 風格用法：
<style type='text/css'>
.three {counter-reset: cnt1 cnt2 5 cnt3 9;}
.three SPAN {counter-increment: cnt1 cnt3 3}
.three I {counter-increment: cnt2 2}
.three EM:before
{content:counter(cnt1)' / '
counter(cnt2)' / '
counter(cnt3)' / ';
color:red;
}
</style>
<div class='three'>
<em>計數器的初始值</em>
<p><span>s1</span>
<i>i1</i>
<span>s2</span>
<i>i2</i>
<p><em>計數器的最後值</em>
</div> - 執行結果：
計數器的初始值
s1 i1 s2 i2
計數器的最後值
元素有 多層巢狀結構時，其宣告的計數器，會在每一層產生一個計數器。讀取計數器值的語法是：
counters(計數器名稱, 分隔字, list-style-type)
可不設 list-style-type，使用預設的數字編號。counters() 會將所有的計數器值列出，用分隔字分開。
- 風格用法：
<style type='text/css'>
.cls2 DL { counter-reset: term }
.cls2 DT { color:red }
.cls2 DT:before {content: counters(term, ".", lower-greek)"：";
counter-increment: term
}
</style>
<div class='cls2'>
<DL>
<DT>老子<dd>道家始祖。
<DL>
<DT>道德經<dd>道家的智慧書。
</DL>
<DT>孔子<dd>儒家始祖。
<DL>
<DT>儒家<dd>宣揚道德教育與仁愛政治的知識份子。
<DT>論語<dd>儒家的思想書籍。
</DL>
</DL>
</div> - 執行結果：
- 老子
- 道家始祖。
- 道德經
- 道家的智慧書。
- 孔子
- 儒家始祖。
- 儒家
- 宣揚道德教育與仁愛政治的知識份子。
- 論語
- 儒家的思想書籍。
- 實際使用後發現：IE8 必須有宣告 !DOCTYPE 才能用計數器；Firefox, Safari, Chrome 沒有這個限制。!DOCTYPE 如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- 我在 TABLE 元素使用計數器時，還遇到一個問題。我用了下面的選擇器：
TABLE.glist { counter-reset: rowscnt }
結果在 IE8 會出錯，一直出現 1；Firefox, Safari, Chrome 可以正常執行。後來改成：
TABLE.glist TR { counter-increment:rowscnt }
TABLE.glist TR TD:first-child:before { content: counter(rowscnt)". " }/* TABLE.glist { counter-reset: rowscnt } */
就都可以執行了。不知道原因出在哪？
TABLE.glist TR { counter-increment:rowscnt }
TABLE.glist TR TD:first-child:before { content: counter(rowscnt)". " }
:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。
- 風格用法：
<style type='text/css'>
.hvr {counter-reset: ctr 1;}
.hvr:hover {counter-increment: ctr 2;}
.hvr:active {counter-increment: ctr 4;}
.hvr SPAN:before
{content: counter(ctr, cjk-ideographic)' ';
background:red
}
.hvr SPAN:active:before
{content: counter(ctr, decimal)' ';
background:blue
}
</style>
<div class='hvr'>
<span>輸出計數器的值</span>
</div> - 執行結果：
輸出計數器的值
- 上例，Firefox 完全成功；Safari, Chrome 沒有增加值。
