清單計數器 counter()、counters()
對於「有序」清單來說，「編號」是相當重要的，除了使用預設的方式讓編號依序呈現，也可以透過 counter() 或 counters() 的 CSS 函式控制與產生編號，這篇教學會介紹如何使用 counter() 和 counters()，以及對應的 counter-reset 和 counter-increment 樣式屬性。
更多參考：CSS 函式 ( 文字與清單計數 )
快速導覽：
counter() 使用方法
counter() 是一個 CSS 的函式，是「所有元素」都可以使用的「計數器」功能，使用時需要先透過 counter-reset 和 counter-increment 定義計數器的名稱和增加幅度，這兩個樣式屬性的說明如下：
| 計數器樣式 | 預設值 | 說明 |
|---|---|---|
| counter-reset | 0 | 定義計數器名稱並重設數值 ( 類似變數 )，需要放在 counter-increment 外層。 |
| counter-increment | 1 | 每出現一次對應名稱的元素，就要增加多少數值。 |
定義 counter-reset 和 counter-increment 之後，就可以開始使用 counter 函式，使用時必須搭配「虛擬元素」和虛擬元素專用的「content」樣式屬性，下方的範例會把 div 裡所有 h2 的前方加上計數器功能，因此 div 裡有幾個 h2，前方就會自動計算出數字。
<!-- HTML 程式碼 -->
<div>
<h2>apple</h2>
<h2>banana</h2>
<h2>coconut</h2>
<h2>oxxo.studio</h2>
<h2>papaya</h2>
</div>
<!-- CSS 程式碼 -->
<style>
div {
counter-reset: oxxo; /* 定義計數器名稱為 oxxo，重設數值為 0 */
}
h2 {
counter-increment: oxxo; /* div 裡每出現一次 h2，oxxo 數值就增加 1 */
margin: 0;
margin-left:20px;
}
h2::before {
content: counter(oxxo)". "; /* 使用計數器計算數字 */
}
</style>
如果要改變計數器的「初始值」或「增加的數值」，只需要定義 counter-reset 和 counter-increment 樣式屬性的「第二個數值」，如果沒有定義，就會使用分別使用 0 和 1 作為預設值，下方範例會用兩組 div，展示計數器從 100 開始，增加幅度分別是為 50 和 -15 的效果。
<!-- HTML 程式碼 -->
<div class="a">
<h2>apple</h2>
<h2>banana</h2>
<h2>coconut</h2>
<h2>oxxo.studio</h2>
<h2>papaya</h2>
</div>
<div class="b">
<h2>apple</h2>
<h2>banana</h2>
<h2>coconut</h2>
<h2>oxxo.studio</h2>
<h2>papaya</h2>
</div>
<!-- CSS 程式碼 -->
<style>
div {
counter-reset: oxxo 100;
margin: 10px;
border: 1px solid #000;
}
.a h2 {
counter-increment: oxxo 50; /* .a 裡面每出現一個 h2，計數器就增加 50 */
margin: 0;
margin-left:20px;
}
.b h2 {
counter-increment: oxxo -15; /* .b 裡面每出現一個 h2，計數器就減少 15 */
margin: 0;
margin-left:20px;
}
h2::before {
content: counter(oxxo)". ";
}
</style>
清單元素使用 counter()
由於計數器 counter() 是透過虛擬元素的 content 顯示數值，因此如果要在清單元素裡使用計數器，就必須先將原本的標記符號隱藏，避免相互干擾，或者使用 counters() 來實現修改清單標記的功能 ( 下方段落有詳細介紹 )，下方範例將 counter-reset 放在 body，就可以讓計數器的數值跨越不同的 div，讓不同的清單中的數值可以接續下去。
<!-- HTML 程式碼 -->
<div>
<ul>
<li>apple</li>
<li>banana</li>
<li>coconut</li>
<li>oxxo.studio</li>
<li>papaya</li>
</ul>
</div>
<div>
<ul>
<li>apple</li>
<li>banana</li>
<li>coconut</li>
<li>oxxo.studio</li>
<li>papaya</li>
</ul>
</div>
<!-- CSS 程式碼 -->
<style>
body {counter-reset: oxxo;}
div {
margin: 10px;
border: 1px solid #000;
}
ul {list-style: none;}
li {counter-increment: oxxo;}
li::before {content: counter(oxxo)". ";}
</style>
巢狀計數
除了設定「單一」計數器名稱，遇到「巢狀清單」或「巢狀結構」時，也可以設定「多組」計數器名稱，再將每個名稱分別套用到不同層的元素，就能實現巢狀計數的功能，下方範例使用了一個「四層」的巢狀清單，設定樣式時分別設定每一層 li 對應不同的計數器，最後再將計數器數值組合，就可以實現巢狀計數的效果。
<!-- HTML 程式碼 -->
<div>
<ul>
<li>apple</li>
<li>banana</li>
<li>oxxo.studio
<ul>
<li>pen</li>
<li>pencil</li>
<li>paper
<ul>
<li>red</li>
<li>blue</li>
<li>green
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- CSS 程式碼 -->
<style>
div {
margin: 10px;
border: 1px solid #000;
counter-reset: aa bb cc dd; /* 一次設定並重置多個計數器名稱 */
}
ul {list-style: none;} /* 隱藏清單標記 */
li {counter-increment: aa;} /* 第一層清單計數器使用 aa */
li li {counter-increment: bb;} /* 第二層清單計數器使用 bb */
li li li {counter-increment: cc;} /* 第三層清單計數器使用 cc */
li li li li {counter-increment: dd;} /* 第四層清單計數器使用 dd */
li::before {
content: counter(aa)"."counter(bb)"."counter(cc)"."counter(dd)". "; /* 組合多個計數器 */
}
</style>
counters() 使用方法
counters() 也是 CSS 的計數器函式，主要是提供具有「標記」和「巢狀結構」的清單元素使用，讓清單元素可以快速利用計數器設定標記，雖然也可以應用在非清單的元素，但使用時仍然都會以清單為主，counters() 具有三個參數，下方列出參數說明：
| 參數 | 說明 |
|---|---|
| counter-name | 自訂義的計數器名稱。 |
| string | 巢狀結構中，上一層標記與下一層標記之間的連接符號，需要用引號包覆。 |
| counter-style | 標記的類型名稱，參考「list-style-type 清單標記類型」。 |
counters() 的撰寫語法：
li::before{
content: counters(counter-name, "string", counter-style);
}
下方範例透過 counters() 讓巢狀清單可以將計數器 0、1、2、3...的數字，轉換成特定的標記，並按照一定的規則呈現巢狀結構。
<!-- HTML 程式碼 -->
<div>
<ul class="a">
<li>apple</li><li>banana</li>
<li>oxxo.studio
<ul>
<li>red</li>
<li>yellow
<ul>
<li>HTML</li><li>CSS</li><li>Javascript</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div>
<ul class="b">
<li>apple</li> <li>banana</li>
<li>oxxo.studio
<ul>
<li>red</li>
<li>yellow
<ul>
<li>HTML</li><li>CSS</li><li>Javascript</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- CSS 程式碼 -->
<style>
ul {counter-reset: oxxo;} /* 設定計數器名稱並重置數值為 0 */
li {
list-style: none; /* 隱藏原本的清單標記 */
counter-increment: oxxo; /* 出現 li 就增加計數器的值 1 */
}
.a li::before {
content: counters(oxxo,'-',upper-alpha)'. '; /* 將計數器的數值對應到標記類型 */
color: red;
}
.b li::before {
content: counters(oxxo,'/',cjk-heavenly-stem)'. '; /* 將計數器的數值對應到標記類型 */
color: green;
}
</style>
使用 counters() 改變清單標記
因為 counters() 是計數器，可以指定計數的「數字間隔」，透過不同的數字間隔對應到標記，就能做出「不連續的標記效果」，這也是單靠清單標記做不到的，下方的範例使用 aa 和 bb 兩組計數器，aa 從 0 開始每次增加 2，bb 從 0 開始每次增加 3，轉換成 upper-alpha 和 trad-chinese-formal 標記類型後，標記也會按照這個間隔呈現。
<!-- HTML 程式碼 -->
<div>
<ul class="a">
<li>apple</li>
<li>banana</li>
<li>oxxo.studio</li>
<li>papaya</li>
<li>orange</li>
<li>coconut</li>
<li>grap</li>
</ul>
</div>
<div>
<ul class="b">
<li>apple</li>
<li>banana</li>
<li>oxxo.studio</li>
<li>papaya</li>
<li>orange</li>
<li>coconut</li>
<li>grape</li>
</ul>
</div>
<!-- CSS 程式碼 -->
<style>
div {
border: 1px solid #000;
margin: 10px;
}
.a {counter-reset: aa;}
.b {counter-reset: bb;}
.a li {
list-style: none;
counter-increment: aa 2; /* aa 間隔 2 增加 */
}
.b li {
list-style: none;
counter-increment: bb 3; /* bb 間隔 3 增加 */
}
.a li::before {
content: counters(aa,'',upper-alpha)'. ';
color: red;
}
.b li::before {
content: counters(bb,'',trad-chinese-formal)'. ';
color: green;
}
</style>
如果將上方範例的 CSS 加入 counter() 函式，就更能看出計數器數字和標記之間的關係。
div {
border: 1px solid #000;
margin: 10px;
}
.a {counter-reset: aa;}
.b {counter-reset: bb;}
.a li {
list-style: none;
counter-increment: aa 2;
}
.b li {
list-style: none;
counter-increment: bb 3;
}
.a li::before {
content: counters(aa,'',upper-alpha)'('counter(aa)'). '; /* 加入 counter() */
color: red;
}
.b li::before {
content: counters(bb,'',trad-chinese-formal)'('counter(bb)'). '; /* 加入 counter() */
color: green;
}
小結
counter() 或 counters() 是兩個相當好用的 CSS 計數器函式，可以快速修改清單標記的樣式 ( 其實所有元件都可以，只是比較不會這麼做 )，如果熟練應用，就可以不需要透過 JavaScript 輔助，也可以快速實現清單標記的各種效果。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～