作者:dragonir
在web設計中,使用一種井井有條的方法來展示資料是十分重要的,這樣使用者就可以很清晰的理解網站所展示的資料結構和內容,使用有序列表就是實現資料有組織的展示的一種簡單方法。
如果你需要更加深入地控制有序列表數字的樣式,你可能會覺得必須透過增加更多的 結構或者透過 才能做到。幸運的是,使用 可以更加容易的解決這個問題。在本文中,主要介紹什麼是 和一些使用案例。
有序列表的問題
當你寫了一個如下的有序列表,瀏覽器會自動在列表項前面加上數字
這看起來很好,但是它不允許你對數字進行樣式調整。假如,你需要把列表前的數字放進一個圓圈裡來修飾列表,你該怎麼做呢?
一種方法是完全刪除列表,並自己手動新增數字。
這確實是我們想要做的效果,但是也有一些缺點。首先,手動新增數字是很麻煩的。如果你需要更改一個編號,你必須一個接一個地改變它們。面對這種情況,你可以使用 動態新增 標籤來解決這些問題,但這會為 新增更多的節點,從而導致大量記憶體佔用。
在大多數情況下,最好使用CSS計數器。讓我們來看看原因。
CSS計數器簡介
是網頁範圍變數,其值可以使用 規則更改。
首先,使用 屬性設定計數器。 是此處使用的變數名。
接著,使用 屬性來增加計數器的值。
現在,每次出現 元素時, 變數都會增加一。
最後,使用含有設定 屬性和 函式的 偽元素來展示數字。
這裡是完整程式碼:
現在我們還沒有完全達到目標。讓我們對 偽元素進行樣式設計,使其看起來更好。
修改起始數字
預設情況下, 會將計數器設定為 0。當第一個 被呼叫後它的起始變為1 可以透過將一個整數作為 函式的第二個引數來設定初始值。
如果你想從 開始,可以將初始值設定為 。
更改增量值
預設情況下, 會使計數器的值增加一。就像 一樣,你可以定義 屬性的偏移值。
在此示例中, 將 設定為 。每次呼叫 時, 數值都會增加 ,因此,你將會看到列表序為 、 和 。
計數器格式
函式可以有兩個引數: 和 。對於第二個引數,你可以使用任何有效的列表型別值,包括:
(e。g。, 1, 2, 3…)
(e。g。, a, b, c…)
(e。g。, i, ii, iii…)
預設值為數字。
例如,如果你像我一樣科學,你可以使用 小寫希臘字母作為編號的值。
計數器巢狀
使用巢狀訂單列表時,始終以這種格式顯示編號:
如果您需要子列表專案的數字編號(例如,1。1),您可以使用具有 功能的 。
注意,我們使用的是 函式,而不是 函式。
函式的第二個引數是連線字串。它還可以有第三個引數來設定格式(例如,希臘數字或羅馬數字)。
帶標題的巢狀計數器
元素,如 , 不巢狀在文件中。它們以不同的元素出現,但仍代表一種層次結構。下面介紹如何將巢狀數字設定到標題中:
每次找到時,計數器都會重置。 在文件中獲得的編號和 相關。
Browser support
值得慶幸的是, 計數器自與 一起推出以來,得到了瀏覽器的廣泛支援。雖然在內容以外的屬性中使用 函式仍然是實驗性的,但你可以毫不猶豫地執行本教程中涵蓋的所有例子。
一個簡單挑戰
您準備好迎接涉及CSS計數器的簡單挑戰了嗎?
使用 在 行程式碼中顯示 到 及其羅馬字元。
如果你被難倒了,下面是你如何做到這一點:
要建立 個 元素,可以使用以下內容。
CSS計數器:
結論
CSS 計數器在 CSS 中是一個鮮為人知的功能,但您會驚訝於它們派上用場的頻率。在此教程中,我們討論瞭如何以及何時使用 CSS 計數器,並展示了一些示例。
以下是我們使用的屬性列表。
雖然很酷。但有一件事需要明白的是,所有計數器都是全域性性的。如果你在一個有很多 檔案的大型專案中使用,你可能無法找到它們的建立、重置和增量位置。不要過度使用它們,一定要使用描述性名稱的計數器,以避免衝突。
一些實戰例子
更多優秀案例
https://css-tricks。com/custom-list-number-styling/