計數器和清單樣式

許多類型的內容最適合以 HTML 清單表示。如果是食譜步驟或文章註腳等有序清單內容，標記通常也會包含資訊。CSS 提供多種方式來控制清單中的計數器。

列出樣式

預先定義的清單樣式類型相當廣泛，支援數字、字母、羅馬數字和許多國際計數系統。

除了瀏覽器支援的樣式外，W3C 也發布了現成計數器樣式，支援 45 種書寫系統的 181 種額外樣式。

如果這些選項不符合需求，您也可以定義自訂 @counter-style。您可以指定自訂符號、前置字串和後置字串等。

根據預設，項目標記為 outside 清單，位於清單前方，並靠右對齊。您也可以使用 list-style-position: inside 將項目標記放在清單內。

清單樣式可控管清單項目標記的顯示方式，計數器則可控管要顯示的值。如果是 <li> 清單項目元素，瀏覽器會建立名為 list-item 的計數器，每遇到一個清單項目，計數器就會遞增 1。

CSS 計數器會持續計算已設定相應 counter-increment 值的元素算繪次數。

如要建立新的計數器，請使用 counter-reset，並提供計數器名稱和 (選擇性) 初始值。您通常會在包含所有待計數元素的父項元素上設定這項屬性。

注意： counter-reset 會使用初始值和方向初始化計數器，請勿與 counter-set 混淆，後者只會設定現有計數器的值。

然後在要計數的每個元素上新增 counter-increment 屬性。

最後，使用 counter() 函式顯示計數器值。

在這個範例中，我們希望將註腳的執行計數顯示為每個註腳的連結文字。由於我們希望整個文件只有一個計數器，因此我們在主體上設定 counter-reset: note，並在每個註腳連結上遞增。

你也可以使用多個計數器計算不同項目。在附註範例中，如果想顯示附註所在章節和段落的索引，該怎麼做？

您可以使用 counter-reset 在主體上建立區段計數，然後在每個 <h2> 元素上遞增。我們希望每個區段的段落計數都能重設，因此會在 <h2> 元素上使用 counter-reset，並在 <p> 元素上遞增。

最後，我們會在 content 屬性中合併計數器值。

a:after {
  content: "(S" counter(section) "P" counter(paragraph) "N" counter(note) ")";
  font-size: small;
  vertical-align: super;
}

在清單中巢狀插入清單會有什麼影響？系統會為每個 <ul> 或 <ol> 元素初始化 list-item 計數器，而使用 counter() 只會傳回最內層的計數。如要顯示每個巢狀計數器的計數，請使用 counters() 函式，該函式會採用計數器名稱和分隔符號。

li::marker {
  content: counters(list-item, ".")
  }

根據預設，計數器 (包括 <ol> 元素的隱含 list-item 計數器) 會從 0 開始，每個元素會遞增 1，也就是說第一個元素會計為 1。如果想倒數到 1 呢？

如要這麼做，請將 reversed 屬性新增至 <ol>。如果您使用標準清單樣式，標記會正常運作。不過，如果您使用自訂計數器，則必須將 counter-increment 設為負值，並手動計算計數器的起始值。