CSS計數器(自定義列表)

2022-07-20 11:48:11 字數 1099 閱讀 4016

css3計數器(css counters)可以允許我們使用css對頁面中的任意元素進行計數,實現類似於有序列表的功能(自定義有序列表)

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

定義計數器

設定計數器的增數規則

自定義列表樣式

呼叫計數器

counter-reset:[?]+|none|inherit

用來定義計數器的名稱、初始值和作用域,預設值為none

:計數器名稱

:計數器的初始值,可以不寫,預設為0

注意:當元素display為none時,該屬性失效

counter-increment:[?]+|none

用來設定計數器的增數規則,預設值為none(阻止計數器增加)

:需要增數的計數器名稱

:計數器增數的值,可以為負值,預設是1

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

注意:當元素display為none時,該屬性失效

content:+

=counter(name)| 直接呼叫計數器名稱 可得到1,2,3

counter(name,list-style-type)| 呼叫計數器名稱,並指定計數器列表樣式

content:+

=counters(name,string)| 巢狀計數器時,設定間隔的字串 可得到1.1,1.2,1.3

counters(name,string,list-style-type) 巢狀計數器時,設定間隔字串並指定樣式

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

@counter-style counterstylename{

system:演算法

range:使用範圍

symbols/ additive-symbols:符號

prefix:字首

suffix:字尾

pad:補零

negative:負數策略

fallback:出錯後的預設值

speakas:語音策略

計數器demo

CSS計數器(自定義列表)Demo

html doctype html html head meta charset utf 8 title title link rel stylesheet type text css href css begin.css head body section h2 登記個人資訊 h2 ol li 課...

CSS計數器(自定義列表)Demo

html doctype html html head meta charset utf 8 title title link rel stylesheet type text css href css begin.css head body section h2 登記個人資訊 h2 ol li 課...

Hadoop 自定義計數器

private counter c override protected void setup context context throws ioexception,interruptedexception override protected void map text key,byteswrit...