概念

CSS3計數器（CSS Counters）可以允許我們使用css對頁面中的任意元素進行計數，實現類似于有序列表的功能（自定義有序列表）

與有序列表相比，它的突出特性在于可以對任意元素計數，同時實現個性化計數

使用計數器步驟

定義計數器

設置計數器的增數規則

自定義列表樣式

調用計數器

計數器屬性

• counter-reset：定義計數器，包括初始值、作用域等
• counter-increment：設置計數器的增數規則（一般都是用默認，即值只設置了計數器名稱，未設置增數規則）
• counter()/counters()：在content屬性中使用，用來調用計數器
• @counter-style：自定義列表樣式

counter-reset語法

counter-reset:[<identifier><integer>?]+|none|inherit

用來定義計數器的名稱、初始值和作用域，默認值為none

<identifier>：計數器名稱

<integer>：計數器的初始值，可以不寫，默認為0

注意：當元素display為none時，該屬性失效

counter-increment語法

counter-increment:[<user-ident><integer>?]+|none

用來設置計數器的增數規則，默認值為none（阻止計數器增加）

<user-ident>：需要增數的計數器名稱

<integer>：計數器增數的值，可以為負值，默認是1

我們可以同時設置多個計數器增數規則

注意：當元素display為none時，該屬性失效

counter()語法

content:[<counter>]+

<counter>=counter(name)| 直接調用計數器名稱 可得到1,2,3

???????? ???????? ??counter(name,list-style-type)| 調用計數器名稱，并指定計數器列表樣式

counters()語法

content:[<counter>]+

<counter>=counters(name,string)| 嵌套計數器時，設置間隔的字符串 可得到1.1,1.2,1.3

???????? ???????? ??counters(name,string,list-style-type) 嵌套計數器時，設置間隔字符串并指定樣式

注意：使用計數器，需要結合：before和：after使用。可以同時使用多個計數器

@counter-style語法

@counter-style counterStyleName{

???????? system：算法

???????? range：使用范圍

???????? symbols/ additive-symbols：符號

???????? prefix：前綴

???????? suffix：后綴

???????? pad：補零

???????? negative：負數策略

???????? fallback：出錯后的默認值

???????? speakas：語音策略

}

計數器demo

轉載于:https://www.cnblogs.com/xiaobaizhiqian/p/8324858.html

總結

以上是生活随笔為你收集整理的CSS计数器（自定义列表）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。