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...