css計數器詳解

2022-01-15 17:20:06 字數 2345 閱讀 7105

就是採用css給一些html元素自動生成編號，比如類似1.3.2這種，先看個效果：

對，就是這種類似word裡面很常見的效果，**如下：

進風口的爽膚水


非進口商的


非進口商的


非進口商的


進風口的爽膚水


非進口商的


非進口商的


將咖啡色的開發商


將咖啡色的開發商


將咖啡色的開發商


將咖啡色的開發商


非進口商的


進風口的爽膚水
ie8+，chrome和firefox支援良好。屬於css2範疇。

首先，給我們的計數器取乙個名字，這個名字可以隨便取，比如這裡叫section，然後使用counter-reset在你需要開始計數的地方重置計數器：

ol
然後通過counter-increment指定計數器何時自增，比如這裡是碰到li就自增，所以我們寫在li上面：

ol li
最後，就是如何顯示計數器了。顯示計數器有2種方式，counter和counters，先講counter。

counter只是簡單的從前至後計數，忽略巢狀，語法如下：

counter(計數器名稱[, 可選的顯示風格]) // 預設風格為decimal
其中第二個引數為可選，表示計數器顯示的風格，例如，你可以使用upper-roman以羅馬數字顯示，預設為decimal，即數字形式，其可選值大部分和css的 list-style-style 的一致，除了如下幾個不被支援（不同瀏覽器支援的程度不一樣）：

我們使用counter把它顯示到li的:before上面，並指定以大寫羅馬數字顯示：

ol li:before
效果如下：

下面再來看看counters，counters和counter的最大區別是它會巢狀，什麼是巢狀，我的表達能力有限，但我想大部分看到這裡應該都明白了，就是類似1.3.8這種，

語法如下：

counters(計數器名稱, 巢狀時拼接字串[, 可選的顯示風格])
比如我們使用點號.分割，

ol li:before
另外，你可以將counters或者counter與任意字串用空格拼接：

ol li:before
甚至counter和counters混用：

ol li:before
效果如下：

部分瀏覽器可能不支援：

#demo5 ol 


#demo5 ol li 


#demo5 ol li:before
效果：

檢視完整demo請用力猛戳：

CSS的計數器

前端相容 11 19 當前位置 首頁 前端相容 正文 css counters其實就是一計數器，早期在css中計數器僅存在於ul和ol元素。如果要使用在div這樣的元素上，只能通過list style image或者是元素的backgroud image來實現。在 css2.1的規範 中介紹了一種新...

詳解 21 計數器

核心 counter reset意思 定義變數，乙個變數對應乙個值，不寫值預設為0 變數名 值 變數名 值 記住啊，不需要,寫,就錯了！寫,代表終止了哈 counter increment意思 累加，也就是說每次加幾，不寫預設 0 content意思 內容，也就是說文字 counter意思 用來顯示...

計數器 讓我們學會使用 CSS 計數器

我看來，css計數器在web上還沒有得到充分利用，儘管它們的支援非常好 ie8 在本文中，我將解釋如何在專案中使用css計數器，以及一些用例。計數器是css3提供的乙個強大的工具，是一種可以讓我們使用css給元素自動編號的方法。使用它可以很方便對頁面中的任意元素進行計數，實現類似於有序列表的功能。但...