深入理解CSS計數器

2021-09-01 16:15:30 字數 1478 閱讀 4178

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

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

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
[注意]如果不設定，則預設重置為0

counter-increment

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
[注意]如果不設定，則預設遞增為1

具體使用計數器需要結合使用content屬性和counter()函式

counter()函式

counter()函式接受兩個引數，而且兩引數之間用逗號(,)來分隔，第乙個引數是計數器識別符號，第二個引數設定計數器風格(可省略)，與列表中list-style-type值相同。同樣的，可以使用多個counter()函式。

content: counter(c1,upper-roman);//表示使用大寫羅馬字母格式的計數器c1
層級目錄演示

第一節


第二節第一節


第一節第二節


第一節第一節


第二節第一節


深入理解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裡面很常見的效果，如下 進風口的爽膚水 非進口商的 非進口商的 非進口商的 進風口的爽膚水 非進口商的 非進口商的 將咖啡色的開發商 將咖啡色的開發商 將咖啡色的開發商 將咖啡色的開發商 非進口...