[譯] 教你使用 CSS 計數器

• 原文地址：Using CSS Counters
• 原文做者：Adam Laki
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：sakila1012
• 校對者：snowyyu，ryouaki

教你使用 CSS 計數器

CSS 計數器是咱們能夠用特定屬性遞增或遞減的變量。有了它，咱們就能夠像在編程語言裏面同樣，實現一些普通的迭代。

這種方法能夠用於一些創造性的解決方案，其中包括代碼中一些重複部分的計數。

爲了控制你的計數器，你須要 counter-increment 和 counter-increment 屬性，以及 counter() 和 counters() 函數。顯示不出數值的話這些方法根本沒啥用，因此咱們要搭配簡單的 content 屬性。

特性很簡單。好比你有一個無序的列表，你想要計數 li 的項，則須要在 ul 上聲明一個計數器，而後就能夠在其下的 li 增長它的數值了。

counter-reset 屬性

咱們能夠用 counter-reset 屬性來定義咱們的計數器變量；爲此，咱們必須給出任意的名字和可選的開始值。默認的開始值是 0。這個屬性是包裝器元素。

counter-increment 屬性

運用 counter-increment 屬性，咱們能夠遞增或者遞減計數器的值。該屬性還有一個可選的值，用於指定遞增/遞減量。

counter() 函數

counter() 函數負責轉儲。轉儲的位置是內容屬性，由於這是您能夠經過 CSS 將數據返回給 HTML 的地方。該函數有兩個參數，第一個參數是計數器變量名，第二參數是計數器類型(可選)。

注意： 在CSS中沒有任何鏈接運算符，因此若是你想鏈接內容屬性中的兩個值只能使用空格。

counters() 函數

這個函數跟 counter()函數實現一樣的功能。主要區別在於用 counter() 你能夠像嵌套ul同樣把一個計數器插入到另外一個。它有三個參數，第一個是計數器名稱，第二個是分隔符，第三個是計數器類型（可選）。

使用場景 #1 - 自動追蹤文檔條目

當你須要處理一些重複元素的時候，而且你一樣想統計他們的數量，那麼這個方案會很好用。。

咱們在咱們的 .container 包裹元素建立一個 counter-reset。建立後，咱們爲具備問題類名的項目設置一個 counter-increment。最後，咱們用.issues：before 條目的內容屬性顯示出計數器的值。

詳見 Adam Laki (@adamlaki) on CodePen 的 CSS 計數器案例 文章。

使用場景 #2 - 嵌套列表

使用 counters() 函數，咱們能夠像在文本編輯器程序那樣製做嵌套列表計數器。

詳見 Adam Laki (@adamlaki) on CodePen 的嵌套計數器文章。

使用場景 #3 - 計算已經勾選的複選框

使用輸入框的：checked 僞類，咱們能夠檢查複選框是否被選中，選中的話，咱們計數器的數值就會增長。

詳見 Adam Laki (@adamlaki) on CodePen 的複選框計數器 文章。

視頻總結

Steve Griffith 就這個話題作了一個很好的和內容豐富的整套視頻。它涵蓋了幾乎全部你須要瞭解的 CSS 計數器。

其餘使用案例

1. Šime Vidas 發佈了一個 註釋很好的示例。
2. Sam Dutton 作了一個有趣的在線計數示例。
3. Gaël 在複雜的層面上爲他的名爲 a11y.css 的項目使用了這個特性。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。