深入理解CSS計數器

我們對計數器已經不陌生了，有序列表中的列表項標誌就是計數器。

建立計數器的基礎包括兩個方面，一是能重置計數器的起點，二是能將其遞增一定的量。

counter-reset

counter-reset:none;(預設)

counter-reset://
是計數器識別符號，是創作人員自己起的乙個名字
//是重置的數字

counter-reset: c1 4;//

表示將c1的計數器重置為4
counter-reset: c1 4 c2 0 c3 -5;//
表示將c1重置為4,將c2重置為0,將c3重置為-5
couter-reset: c1;//
將c1重置為0

counter-increment:none;(預設)

counter-increment://
是計數器識別符號，是創作人員自己起的乙個名字
//是遞增的數字

counter-increment: c1 4;//

表示將c1計數器的遞增設為4 
counter-reset: c1 4 c2 0 c3 -5;//
表示將c1遞增設為4,將c2遞增設為0,將c3遞增設為-5 
couter-increment: c1;//
將c1計數器的遞增設為1

content: counter(c1,upper-roman);//

表示使用大寫羅馬字母格式的計數器c1

【關於計數器風格詳見下面演示框】

簡單計數器演示

層級目錄演示

"

oshow
">第一節
第二節第一節
第一節第二節
第一節第一節
第二節第一節

body,h2,h3,p    

#oshow
#oshow h2
#oshow h3
#oshow p
#oshow h2:before
#oshow h3:before
#oshow p:before

深入理解CSS計數器

我們對計數器已經不陌生了，有序列表中的列表項標誌就是計數器。建立計數器的基礎包括兩個方面，一是能重置計數器的起點，二是能將其遞增一定的量。counter reset counter reset none 預設 counter reset 是計數器識別符號，是創作人員自己起的乙個名字 是重置的數字 c...

CSS的計數器

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

css計數器詳解

就是採用css給一些html元素自動生成編號，比如類似1.3.2這種，先看個效果 對，就是這種類似word裡面很常見的效果，如下 進風口的爽膚水 非進口商的 非進口商的 非進口商的 進風口的爽膚水 非進口商的 非進口商的 將咖啡色的開發商 將咖啡色的開發商 將咖啡色的開發商 將咖啡色的開發商 非進口...