[譯] CSS 計數器教程

原文連接：A Guide to CSS counter, by Samantha Ming

使用 CSS 計數器屬性能夠將任何元素轉成有序列表，相似 <ol> 的功能。若是你須要爲一個頁面裏的標題元素自動編號或者製做目錄，使用它就很是方便了。

下面是它的使用。

div {
  /* 定義 & 初始化一個計數器 */
  counter-reset: tidbit-counter;
}

h2::before {
  /* 設置計數器增量 */
  counter-increment: tidbit-counter;

  /* 顯示計數器 */
  content: counter(tidbit-counter) ": ";
}
複製代碼

<div>
  <h2>HTML</h2>
  <h2>CSS</h2>
  <h2>JS</h2>
</div>
複製代碼

最終效果以下：

下面解釋計數器屬性的工做原理。

計數器屬性是如何工做的？

讓 CSS 計數器生效，須要三步：

• 定義 & 初始化一個計數器
• 設置計數器增量
• 顯示計數器

這裏的每一步，對應一個 CSS 屬性，因此一共須要 3 個屬性的使用，才能完成計數功能的實現。

1、定義 & 初始化計數器

定義計數器

使用 counter-reset 屬性定義一個計數器。咱們將計數器命名爲 tidbit-counter，這個名字會在以後使用。

counter-reset: tidbit-counter;
複製代碼

定義起始計數值

計數器定義完成後，下一步就是定義起始計數值。起始計數值默認爲 0。注意，這個數字不會顯示，就是個計數器的起始計數值，至關於一個「引子」。若是將它設置爲 20，最終輸出的序號是從 21 開始的，即 21、22、23……這是假設 計數器增量爲 1 的狀況下（立刻就會學到這個概念）。

counter-reset	輸出
0	一、二、3……
20	2一、2二、23……
58	5九、60、61……

舉個例子：

div {
  counter-reset: tidbit-counter 58; /* 👈 */
}

h2::before {
  counter-increment: tidbit-counter;
  content: counter(tidbit-counter) ": ";
}
複製代碼

<div>
  <h2>HTML</h2>
  <h2>CSS</h2>
  <h2>JS</h2>
</div>
複製代碼

顯示效果以下：

counter-reset 屬性用在誰上面？

counter-reset 屬性應該用在父元素上。若是不在父元素上用，就會有問題。

/* ❌ 這樣不行 */
h2 {
  counter-reset: tidbit-counter;
}

h2::before {
  counter-increment: tidbit-counter;
  content: counter(tidbit-counter) ": ";
}
複製代碼

下面是渲染效果，會發現設置的計數器增量（counter-increment）並未產生做用。

固然，也不是必須在直接父元素上。只要是計數列表元素的任意包裝元素就行。

舉個例子：

<section>
  <div>
    <h2>HTML</h2>
    <h2>CSS</h2>
    <h2>JS</h2>
  </div>
</section>
複製代碼

/* ✅ 這樣也行的 */
section {
  counter-reset: tidbit-counter;
}
複製代碼

結果以下：

2、設置計數器增量

計數器設置完成後，就要考慮序號的增長規律是怎樣的。這就是靠 counter-increment 屬性控制的。下面給出了它的語法：

counter-increment: <counter name> <integer>
複製代碼

注意到，counter-increment 接收一個整數參數。表示序號不必定非是按照 1 遞增的。下面的表格給出了一些示例（假設的起始計數值爲 0）：

counter-increment	輸出
1（默認）	一、二、3……
5	五、十、15……
-5	-五、-十、-15……

是的，自增值還能夠是個負值！咱們來看看代碼是怎麼寫的。

div {
  counter-reset: tidbit-counter;
}

h2::before {
  counter-increment: tidbit-counter -5; /* 👈 */
  content: counter(tidbit-counter) ": ";
}
複製代碼

<div>
  <h2>HTML</h2>
  <h2>CSS</h2>
  <h2>JS</h2>
</div>
複製代碼

結果以下：

3、顯示計數器

最後一步，就是顯示計數器了。咱們要在 content 屬性中，使用 counter 功能符。content 屬性一般被 CSS 用來在 HTML 上顯示一些值。下面給了 counter 功能符的語法：

counter(<counter name>, <counter list style>)
複製代碼

默認計數是以數字形式顯示的。這是 <counter list style> 的默認效果。固然，咱們還能定義其餘形式的顯示序號。

序號形式	輸出
默認	一、二、3……
upper-alpha	A、B、C……
lower-roman	i、ii、iii……
thai	๑、๒、๓……

完整的可用序號形式 參見這裏。

咱們舉個例子：

div {
  counter-reset: tidbit-counter;
}

h2::before {
  counter-increment: tidbit-counter;
  content: counter(tidbit-counter, thai); /* 👈 */
}
複製代碼

<div>
  <h2>HTML</h2>
  <h2>CSS</h2>
  <h2>JS</h2>
</div>
複製代碼

渲染效果以下：

多個計數器

固然，咱們也能夠同時設置多個計數器，只要多定義一個計數器名稱就能夠了：

div {
  counter-reset: counter-one counter-two 100; /* 👈 */
}

h2::before {
  counter-increment: counter-one;
  content: counter(counter-one) ": ";
} 

h3::before {
  counter-increment: counter-two;
  content: counter(counter-two) ": ";
}
複製代碼

<div>
  <h2>one</h2>
  <h2>one</h2>

  <h3>two</h3>
  <h3>two</h3>
</div>
複製代碼

效果以下：

嵌套計算器

設置嵌套計數器，用到的就不是 counter 屬性，而是 counters 屬性。counters 屬性多接收了一個字符串參數。

counters(<counter name>, <string>, <counter list style>)
複製代碼

第二個 string 參數表示分隔符，指定內外計數器之間採用何種分隔符鏈接。

**string**	輸出
"."	1.一、1.二、1.3……
">"	1>一、1>二、1>3……
":"	1:一、1:二、1:3……

咱們來看個例子：

div {
  counter-reset: multi-counters;
}

h2::before {
  counter-increment: multi-counters;
  content: counters(multi-counters, ".") ": ";
} 
複製代碼

<div>
  <h2>Frameworks</h2>
  <div>
    <h2>Vue</h2>
    <h2>React</h2>
    <h2>Angular</h2>
  </div>
</div>
複製代碼

效果以下：

Counter VS. <ol>

CSS 計數器並不能代替 <ol>。若是你須要展現一個有序列表，那麼最好仍是堅持使用 <ol>，由於使用這個標籤更符合語義。語義標籤有利於加強可訪問性，而且有利於 SEO。

該用

下面給出了應該使用 <ol> 的使用場景。在這例子裏，爲了語義化，我使用了 <ol> 標籤。

<h2>Rules</h2>

<ol>
  <li>You do not talk about Fight Club</li>
  <li>You do not talk about Fight Club</li>
</ol>
複製代碼

該用 CSS 計數器

下面這個例子，模擬了會在文檔網頁裏出現的結構：標題標籤（對應這裏的 h2）和段落元素並列。爲了達到視覺上的序號效果，我會選擇使用 CSS 計數器。

<article>
  <h2>What is Vue.js?</h2>
  <p>Vue is a progressive framework for building user interfaces.</p>

  <h2>Getting Started</h2>
  <p>Visit Vuejs.org to learn more!</p>
</article>
複製代碼

article {
	counter-reset: hs;
}

h2::before {
  counter-increment: hs;
  content: counter(hs) '. ';
}
複製代碼

渲染結果以下：

兼容性

CSS 計數器屬性受到包括 IE8+ 在內全部現代瀏覽器支持，因此能夠放心使用。

Can I Use: CSS Counters

資源

• MDN Web Docs: Using CSS counters
• MDN WebDocs: List Style Type
• w3schools: CSS counter-increment
• w3schools: CSS counter-reset
• CSS Tricks: counter-increment
• CSS Tricks: counter-reset
• 30 Seconds of CSS
• Counters and Calc(): Two Little-Known CSS Features Explained
• The Accessibility of ::before and ::after
• Accessiblity support for CSS generated content

感謝閱讀！

譯者注：我爲本文建立一個 codepen 筆記，點擊這裏 能夠看見。

（正文完）

---

廣告時間（長期有效）

我有一位好朋友開了一間貓舍，在此幫她宣傳一下。如今貓舍裏養的都是布偶貓。若是你也是個愛貓人士而且有須要的話，不妨掃一掃她的【閒魚】二維碼。不買也沒關係，看看也行。

（完）