> 在web設計中，使用一種井井有條的方法來展示資料是十分重要的，這樣使用者就可以很清晰的理解網站所展示的資料結構和內容，使用有序列表就是實現資料有組織的展示的一種簡單方法。 如果你需要更加深入地控制有序列表數字的樣式，你可能會覺得必須通過增加更多的 `html DOM` 結構或者通過 `JavaScript` 才能做到。幸運的是，使用 `CSS計數器` 可以更加容易的解決這個問題。 在這篇教程中，我們將學習到什麼是 `CSS計數器` 和一些使用案例。 ## 有序列表的問題 當你寫了一個如下的有序列表，瀏覽器會自動在列表項前面加上數字 ```html

1. My First Item
2. My Second Item
3. My Third Item

```  這看起來很好，但是它不允許你對數字進行樣式調整。假如，你需要把列表前的數字放進一個圓圈裡來修飾列表，你該怎麼做呢？ 一種方法是完全刪除列表，並自己手動新增數字。 ```html 1 My First Item 2 My Second Item 3 My Third Item ``` ```css 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; } ```  這確實是我們想要做的效果，但是也有一些缺點。首先，手動新增數字是很麻煩的。如果你需要更改一個編號，你必須一個接一個地改變它們。面對這種情況，你可以使用 `JavaScript` 動態新增 `` 標籤來解決這些問題，但這會為 `DOM` 新增更多的節點，從而導致大量記憶體佔用。 在大多數情況下，最好使用CSS計數器。讓我們來看看原因。 ## CSS計數器簡介 `CSS計數器`是網頁範圍變數，其值可以使用 `CSS` 規則更改。 首先，使用 `counter-reset` 屬性設定計數器。`list-number` 是此處使用的變數名。 ```css div.list { counter-reset: list-number; } ``` 接著，使用 `counter-increment`屬性來增加計數器的值。 ```css div.list div { counter-increment: list-number; } ``` 現在，每次出現 `div.listdiv` 元素時，`list-number` 變數都會增加一。 最後，使用含有設定 `content`屬性和 `counter()`函式的 `:before` 偽元素來展示數字。 ```css div.list div:before { content: counter(list-number); } ``` 這裡是完整程式碼: ```html My first item My second item My third item ``` ```css div.list { counter-reset: list-number; } /** 可以在:before 為元素中使用 counter-increment **/ div.list div:before { counter-increment: list-number; content: counter(list-number); } ``` 現在我們還沒有完全達到目標。讓我們對 `:before` 偽元素進行樣式設計，使其看起來更好。 ```css div.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` 函式的第二個引數來設定初始值。 ```css div.list { counter-reset: list-number 1; } ```  如果你想從 `0` 開始，可以將初始值設定為 `-1`。 ```css div.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`。 ```css div.list { counter-reset: list-number; } div.list div:before { counter-increment: list-number 2; // other styles } ```  ## 計數器格式 `counter()` 函式可以有兩個引數：`counter-name` 和 `counter-format`。對於第二個引數，你可以使用任何有效的列表型別值，包括： * `decimal` (e.g., 1, 2, 3…) * `lower-latin` (e.g., a, b, c…) * `lower-roman` (e.g., i, ii, iii…) 預設值為數字。 例如，如果你像我一樣科學，你可以使用 `lower-greek` 小寫希臘字母作為編號的值。 ```css div.list div:before { counter-increment: list-number; content: counter(list-number, lower-greek); // ... other styles } ```  ## 計數器巢狀 使用巢狀訂單列表時，始終以這種格式顯示編號： 如果您需要子列表專案的數字編號（例如，1.1），您可以使用具有 `counters()` 功能的 `CSS計數器`。 ```html

1. My First Item
   1. My Nested First Item
   2. My Nested Second Item
2. My Second Item

``` ```css ol { list-style-type:none; counter-reset:list; } ol li:before { counter-increment:list; content: counters(list, ".") ". "; } ``` 注意，我們使用的是 `counters()` 函式，而不是 `counter()` 函式。 `counters()` 函式的第二個引數是連線字串。它還可以有第三個引數來設定格式（例如，希臘數字或羅馬數字）。 ## 帶標題的巢狀計數器 元素，如 `

`，`

` 不巢狀在文件中。它們以不同的元素出現，但仍代表一種層次結構。下面介紹如何將巢狀數字設定到標題中： ```css 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) ". "; } ``` 每次找到`

`時，`

`計數器都會重置。`

` 在文件中獲得的編號和 `

` 相關。 ## Browser support 值得慶幸的是，`CSS` 計數器自與 `CSS2` 一起推出以來，得到了瀏覽器的廣泛支援。雖然在內容以外的屬性中使用 `counter()` 函式仍然是實驗性的，但你可以毫不猶豫地執行本教程中涵蓋的所有例子。  ## 一個簡單挑戰 您準備好迎接涉及CSS計數器的簡單挑戰了嗎？ 使用 `CSS計數器`在 `10` 行程式碼中顯示 `1` 到 `1000` 及其羅馬字元。 如果你被難倒了，下面是你如何做到這一點： 要建立 `1000` 個 `div` 元素，可以使用以下內容。 ```js for (var i = 0; i < 1000; i++) { document.body.appendChild( document.createElement("div") ); } ``` CSS計數器: ```css body { counter-reset:number; } div:before { counter-increment:number; content: counter(number) " => " counter(number, lower-roman); } ``` ## 結論 CSS 計數器在 CSS 中是一個鮮為人知的功能，但您會驚訝於它們派上用場的頻率。在此教程中，我們討論瞭如何以及何時使用 CSS 計數器，並展示了一些示例。 以下是我們使用的屬性列表。 | 屬性 | 用法 | | ------------------------------------------------------ | -------------------------------------- | | counter-reset | 重置（或建立）給定值計數器（預設0） | | counter-increment | 通過給定偏移增加給定計數器（預設值 1） | | counter(counter-name, counter-format) | 從給定格式獲取計數器的價值 | | counters(counter-name, counter-string, counter-format) | 從給定格式獲取巢狀計數器的價值 | `CSS計數器` 雖然很酷。但有一件事需要明白的是，所有計數器都是全域性性的。如果你在一個有很多 `CSS` 檔案的大型專案中使用，你可能無法找到它們的建立、重置和增量位置。不要過度使用它們，一定要使用描述性名稱的計數器，以避免衝突。 ## 一些實戰例子  ```html

Styling Ordered List Numbers

1. Tomato
2. Cucumber
3. Onion
4. Pepper

1. Tomato
2. Cucumber
3. Onion
4. Pepper

1. Tomato
2. Cucumber
3. Onion
4. Pepper

1. Tomato
2. Cucumber
3. Onion
4. Pepper

1. Tomato
2. Cucumber
3. Onion
4. Pepper

1. Tomato
2. Cucumber
3. Onion
4. Pepper

更多例子 ``` ## 更多優秀案例 https://css-tricks.com/custom-list-number-styling/ > 文章地址：https://www.cnblogs.com/dragonir/p/14475600.html 作者：d