使用CSS計數器花式玩轉列表編號

在網頁設計中，以有組織的方式表示數據很是重要，這樣用戶能夠輕鬆地瞭解網站或內容的結構。最簡單的方法是使用有序列表。

若是你須要對數字的外觀進行更多的控制，你可能會認爲你須要經過HTML或JavaScript在DOM中添加更多的元素，並對其進行樣式化。幸運的是，CSS計數器爲你省去了不少麻煩。

在本教程中，咱們將演示如何開始使用CSS計數器並介紹一些用例。

相關閱讀： 使用CSS ::marker的自定義項目符號

有序列表的問題

當編寫以下所示的有序列表時，瀏覽器會自動顯示數字。

<ol>
  <li>My First Item</li>
  <li>My Second Item</li>
  <li>My Third Item</li>
</ol>

這很好，但它不容許你對數字進行樣式化。例如，假設你須要把數字放在一個圓圈內。你會怎麼作呢？

一種方法是徹底擺脫列表，而後本身手動添加數字。

<div>
  <span>1</span> My First Item
</div>
<div>
  <span>2</span> My Second Item
</div>
<div>
  <span>3</span> My Third Item
</div>

<style>
div {
  margin-bottom:10px;
}
div span {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:25px;
  height:25px;
  border-radius:50%;
  background-color:#000;
  color:#fff;
}
</style>

這樣作能夠作到咱們須要它作的事情，但也有一些缺點。其一，手寫數字很困難。並且，若是你須要修改一個數字怎麼辦？你就得一個一個地改。你可使用JavaScript動態添加 <span> 元素來解決這些問題，可是這樣會給DOM增長更多的節點，致使內存佔用嚴重。

在大多數狀況下，最好使用CSS計數器。讓咱們檢查一下緣由。

CSS計數器簡介

CSS計數器是網頁範圍變量，可使用CSS規則更改其值。

首先，使用 counter-reset 屬性設置一個計數器。 list-number 是此處要使用的變量名。

.list {
  counter-reset: list-number;
}

接下來，使用 counter-increment 屬性增長計數器的值。

.list div {
  counter-increment: list-number;
}

如今，每次出現 .list div 元素時，list-number 變量都會增長一。

最後，在內容屬性和 counter() 函數中使用 :before 僞元素來顯示數字。

.list div:before {
  content: counter(list-number);
}

這是完整的代碼：

<div class="list">
  <div>My first item</div>
  <div>My second item</div>
  <div>My third item</div>
</div>

<style>
.list {
  counter-reset: list-number;
}
/** 注意，咱們能夠在:before僞元素中使用counter-increment **/
.list div:before {
  counter-increment: list-number;
  content: counter(list-number);
}
</style>

效果以下

咱們還沒到那兒。讓咱們設置 :before 僞元素的樣式，使其看起來更好。

.list div:before {
  counter-increment: list-number;
  content: counter(list-number);
  
  margin-right: 10px;
  margin-bottom:10px;
  width:35px;
  height:35px;
  display:inline-flex;
  align-items:center;
  justify-content: center;
  font-size:16px;
  background-color:#d7385e;
  border-radius:50%;
  color:#fff;
}

效果以下

改變起點

默認狀況下，counter-reset 函數將計數器設置爲 0，在第一次調用 counter-increment 函數後，從 1 開始。經過向 counter-reset 函數傳遞一個整數做爲第二個參數來設置初始值。

.list {
  counter-reset: list-number 1;
}

若是要從 0 開始，請將初始值設置爲 -1。

.list {
  counter-reset: list-number -1;
}

更改增量值

默認狀況下，counter-increment 會將計數器的值增長一個。就像 counter-reset 同樣，你能夠爲 counter-increment 屬性定義一個偏移量。

在此示例中，counter-reset 將 list-number 設置爲 0。每次調用 counter-increment 時，list-number 的值將增長 2，所以，你將看到數字分別爲 2、4 和 6。

.list {
  counter-reset: list-number;
}
.list div:before {
  counter-increment: list-number 2;
  // 其餘樣式
}

計數器格式

counter() 函數能夠具備兩個參數：計數器名稱和計數器格式。對於第二個參數，可使用任何有效的 list-style-type 值，包括：

• decimal (e.g., 1, 2, 3…)
• lower-latin (e.g., a, b, c…)
• lower-roman (e.g., i, ii, iii…)

默認值爲 decimal。

例如，若是您像我同樣熱愛科學，則可使用 lower-greek 進行alpha-beta值編號。

.list div:before {
  counter-increment: list-number;
  content: counter(list-number, lower-greek);
  // ... 其餘樣式
}

嵌套的計數器

使用嵌套的有序列表時，編號始終以如下格式顯示：

若是你須要子列表項的數字（例如 1.1），則能夠將CSS計數器與 counters() 函數一塊兒使用。

<ol>
  <li>
     My First Item
    <ol>
      <li>My Nested First Item</li>
      <li>My Nested Second Item</li>
    </ol>
  </li>
  <li>My Second Item</li>
</ol>

<style>
ol {
  list-style-type:none;
  counter-reset:list;
}
ol li:before {
    counter-increment:list;
    content: counters(list, ".") ". ";
}
</style>

效果以下

請注意，咱們使用的是 counters() 函數，而不是 counter() 。

counters() 函數的第二個參數是鏈接字符串。它還能夠具備第三個參數來設置格式（例如希臘語或羅馬語）。

帶有標題的嵌套計數器

<h1>，<h2> 之類的元素未嵌套在文檔中。它們顯示爲不一樣的元素，但仍表明一種層次結構。如下是將嵌套數字添加到標題以前的方法：

body {
  counter-reset:h1;
}
h1 {
  counter-reset:h2;
}
h1:before {
  counter-increment: h1;
  content: counter(h1) ". ";
}
h2:before {
  counter-increment:h2;
  content: counter(h1) "." counter(h2) ". ";
}

每次找到一個 h1，h2 計數器就會重置。文檔中的每個 <h2> 都會獲得一個相對於 <h1> 的 x.y. 的數字。

瀏覽器支持

值得慶幸的是，自從CSS2引入CSS計數器以來，瀏覽器就普遍支持它們。雖然在 content 之外的屬性中使用counter() 函數還是實驗性的，但你能夠堅決果斷地作咱們在本教程中涉及到的全部練習。

如下是我可使用的瀏覽器支持詳細信息。

一個簡單的挑戰

你準備好應對涉及CSS計數器的簡單挑戰了嗎？

使用CSS計數器，在10行代碼中顯示 1 到 1000 及其羅馬字符。

若是你感到困惑，請按照如下步驟操做：

要建立1,000個 div 元素，請使用如下內容。

for (var i = 0; i < 1000; i++) {
  document.body.appendChild( document.createElement("div") );  
}

CSS counters：

body {
  counter-reset:number;
}
div:before {
  counter-increment:number;
  content: counter(number) " => " counter(number, lower-roman);
}

效果以下

你想出了什麼？

結論

如下是咱們使用的屬性的列表。

CSS counters 是CSS中中不爲人知的功能，但你會驚訝於它的使用頻率。在本教程中，咱們介紹瞭如何以及什麼時候使用CSS計數器，並列舉了一些例子。

屬性	使用
counter-reset	將計數器重置（或建立）爲給定值（默認爲0）
counter-increment	給定計數器增長給定偏移量（默認爲1）
counter(counter-name, counter-format)	從給定格式獲取計數器的值
counters(counter-name, counter-string, counter-format)	從給定的格式獲取嵌套計數器的值

固然，CSS計數器是很酷。但我擔憂的一點是，全部的計數器都是全局的。若是你在一個有不少CSS文件的大項目中使用了不少，你可能會找不到它們的建立、重置和增量位置。若是能夠的話，不要過分使用，若是必定要使用的話，必定要用描述性的名字作計數器，避免衝突。

---

原文：https://blog.logrocket.com做者：Supun Kavinda