css計數器

weixin_34249678發表於2017-10-21
CSS

什麼是css計數器

就是採用css給一些html元素自動生成編號，比如類似1.3.2這種，先看個效果：

對，就是這種類似Word裡面很常見的效果，程式碼如下：

<style type="text/css">
#demo1 ol { counter-reset: section; list-style-type: none; }
#demo1 ol li { counter-increment: section; }
#demo1 ol li:before { content: counters(section, ".") ". "; }
</style>
<div id="demo1">
	<ol>
		<li>進風口的爽膚水
			<ol>
				<li>非進口商的</li>
				<li>非進口商的</li>
				<li>非進口商的</li>
			</ol>
		</li>
		<li>進風口的爽膚水
			<ol>
				<li>非進口商的</li>
				<li>
					非進口商的
					<ol>
						<li>將咖啡色的開發商</li>
						<li>將咖啡色的開發商</li>
						<li>將咖啡色的開發商</li>
						<li>將咖啡色的開發商</li>
					</ol>
				</li>
				<li>非進口商的</li>
			</ol>
		</li>
		<li>進風口的爽膚水</li>
	</ol>
</div>
複製程式碼

IE8+，Chrome和Firefox支援良好。屬於CSS2範疇。

解釋

初始化計數器

首先，給我們的計數器取一個名字，這個名字可以隨便取，比如這裡叫section，然後使用counter-reset在你需要開始計數的地方重置計數器：

ol { counter-reset: section; }
複製程式碼

計數器自增

然後通過counter-increment指定計數器何時自增，比如這裡是碰到li就自增，所以我們寫在li上面：

ol li { counter-increment: section; }
複製程式碼

顯示計數器

最後，就是如何顯示計數器了。顯示計數器有2種方式，counter和counters，先講counter。

counter

counter只是簡單的從前至後計數，忽略巢狀，語法如下：

counter(計數器名稱[, 可選的顯示風格]) // 預設風格為decimal
複製程式碼

其中第二個引數為可選，表示計數器顯示的風格，例如，你可以使用upper-roman以羅馬數字顯示，預設為decimal，即數字形式，其可選值大部分和css的 list-style-style 的一致，除了如下幾個不被支援（不同瀏覽器支援的程度不一樣）：

  • circle
  • square
  • lower-alpha
  • upper-mongolian

我們使用counter把它顯示到li的:before上面，並指定以大寫羅馬數字顯示：

ol li:before { content: counter(section, upper-roman) ". ";}
複製程式碼

效果如下：

counters

下面再來看看counters，counters和counter的最大區別是它會巢狀，什麼是巢狀，我的表達能力有限，但我想大部分看到這裡應該都明白了，就是類似1.3.8這種，

語法如下：

counters(計數器名稱, 巢狀時拼接字串[, 可選的顯示風格])
複製程式碼

比如我們使用點號.分割，

ol li:before { content: counters(section, "."); }
複製程式碼

另外，你可以將counters或者counter與任意字串用空格拼接：

ol li:before { content: "我是字串1" counters(section, ".") "我是字串2" "我是字串3"; }
複製程式碼

甚至counter和counters混用：

ol li:before { content: counter(section) ". " counters(section, ".", lower-alpha) ". "; }
複製程式碼

效果如下：

一些高階用法

使用中文計數

部分瀏覽器可能不支援：

#demo5 ol { counter-reset: section; }
#demo5 ol li { counter-increment: section; }
#demo5 ol li:before { content: counter(section, cjk-ideographic) "、"; }
複製程式碼

效果：

自定義計數器起始值

#demo6 ol { counter-reset: section 5; }
#demo6 ol li { counter-increment: section; }
#demo6 ol li:before { content: counter(section) ". "; }
複製程式碼

自定義每次遞增的值

#demo7 ol { counter-reset: section 5; }
#demo7 ol li { counter-increment: section 2; }
#demo7 ol li:before { content: counter(section) ". "; }
複製程式碼

遞減計數

#demo8 ol { counter-reset: section 6; }
#demo8 ol li { counter-increment: section -1; }
#demo8 ol li:before { content: counter(section) ". "; }
複製程式碼

多個計數器同時使用

#demo9 ol { counter-reset: section; }
#demo9 ol li { counter-increment: section; }
#demo9 ol li:before { content: "==" counter(section, lower-alpha) counters(section, '-') "** "; }
複製程式碼

完整demo

檢視完整demo請用力猛戳：demo.liuxianan.com/2016/03/08-…


相關文章