CSS 里面的偽元素其實是非常好用的，但是經(jīng)常容易被大家忽略，偽元素里面常用到的 content 屬性，可能現(xiàn)在很多人僅僅以為 content 屬性的值只支持字符串，除了字符串外常用到的還有 uri、counter ，今天所要介紹的就是 conter(計數(shù)器)。
CSS 中的計數(shù)器類似于變量，可以實現(xiàn)簡單的計數(shù)功能，并將結(jié)果顯示在頁面上，在早期的網(wǎng)站上應(yīng)用比較廣泛。要實現(xiàn)計數(shù)器需要用到以下幾個屬性：
| 屬性 | 詳細 |
| counter-reset | 創(chuàng)建或者重置計數(shù)器； |
| counter-increment | 遞增變量 |
| content | 插入生成的內(nèi)容 |
| counter() 或 counters() | 將計數(shù)器的值添加到元素。 |
下面我們就來看一下 CSS 中的計數(shù)器是如何使用的。
1. 使用計數(shù)器自動編號
CSS計數(shù)器根據(jù)規(guī)則來遞增變量。
CSS計數(shù)器使用到以下幾個屬性：
（1）counter-reset:name1 name2 創(chuàng)建或者重置計數(shù)器（可以同時定義多個計數(shù)器，中間用空格隔開）
（2）counter-increment:name step 遞增變量（可以遞增一個或者多個）
（3）content:counter(name) 插入生成的內(nèi)容（使用偽元素before/after）
（4）counter()或counters()函數(shù) 將計數(shù)器值添加到元素
創(chuàng)建計數(shù)器時，必須在該標簽的前一個標簽或者是父標簽里創(chuàng)建，如果定義在自己標簽內(nèi)是無效的。
具體應(yīng)用：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dotcpp編程</title>
<style>
div{
counter-reset: counter1;
}
h2{
counter-reset: counter2;
}
h2::before{
/* 先設(shè)置步長 */
counter-increment: counter1 1;
content: '第' counter(counter1) '篇';
}
p::before{
/* 先設(shè)置步長 */
counter-increment: counter2 1;
content: '第' counter(counter1) '段';
}
</style>
</head>
<body>
<div>
<h2></h2>
<p></p>
<p></p>
<p></p>
<h2></h2>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</body>
</html>運行結(jié)果：
2. 初始化計數(shù)器
要使用計數(shù)器首先需要使用 counter-reset 屬性來創(chuàng)建一個計數(shù)器，這一過程便叫做初始化計數(shù)器。counter-reset 屬性的語法格式如下：
counter-reset：none | [<identifier> <integer>]
參數(shù)說明如下：
（1）none：阻止計數(shù)器復(fù)位；
（2）<identifier>：定義計數(shù)器的名稱；
（3）<integer>：定義計數(shù)器的起始值，默認值為 0，可以為負值。
3. 計數(shù)器自增
初始化計數(shù)器后，可以通過 counter-increment 屬性來指定計數(shù)器何時自增，語法格式如下：
counter-increment：none | [<identifier> <integer>]
參數(shù)說明如下：
（1）none：阻止計數(shù)器增加；
（2）<identifier>：定義要自增的計數(shù)器名稱；
（3）<integer>：定義計數(shù)器每次增加的數(shù)值，默認值為 1，可以為負值。
4. 顯示計數(shù)器
最后，就是如何顯示計數(shù)器了。要顯示計數(shù)器您可以使用 counter() 或 counters() 函數(shù)，這兩個函數(shù)的語法格式如下：
counter(name) counters(name, string, list-style-type)
參數(shù)說明如下：
（1）name：計數(shù)器的名稱；
（2）string：當計數(shù)器嵌套使用時，用來拼接的字符串；
（3）list-style-type：計數(shù)器顯示的風(fēng)格，可以是 CSS 中允許的任何《list-style-type 屬性》的值。
下面通過一個簡單的示例來演示計數(shù)器的使用：
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: chapter;
}
h5, h6 {
margin: 5px 0 5px;
}
h5 {
counter-reset: section;
counter-increment: chapter;
}
h6 {
counter-increment: section;
}
h5:before {
content: "Chapter " counter(chapter) ". ";
}
h6:before {
content: counter(chapter) "." counter(section) " ";
}
</style>
</head>
<body>
<h5>第一章</h5>
<h6>第一節(jié)</h6>
<h6>第二節(jié)</h6>
<h6>第三節(jié)</h6>
<h6>第四節(jié)</h6>
<h5>第二章</h5>
<h6>第一節(jié)</h6>
<h6>第二節(jié)</h6>
<h6>第三節(jié)</h6>
<h6>第四節(jié)</h6>
</body>
</html>運行結(jié)果：
5. 計數(shù)器嵌套
另外，計數(shù)器還可以嵌套使用，而且使用 counters() 函數(shù)可以在不同級別的嵌套計數(shù)器之間插入一個字符串，如下例所示：
<!DOCTYPE html>
<html>
<head>
<style>
ol {
/* 為每個ol元素創(chuàng)建新的計數(shù)器實例 */
counter-reset: ol-list;
list-style-type: none;
}
li:before {
/* 只增加計數(shù)器的當前實例 */
counter-increment: ol-list;
/* 為所有計數(shù)器實例增加以“.”分隔的值 */
content: counters(ol-list, ".") "、";
}
</style>
</head>
<body>
<ol>
<li>卷</li>
<li>章
<ol>
<li>節(jié)</li>
<li>節(jié)</li>
<li>節(jié)
<ol>
<li>小節(jié)</li>
<li>小節(jié)</li>
</ol>
</li>
<li>節(jié)
<ol>
<li>小節(jié)</li>
<li>小節(jié)</li>
<li>小節(jié)</li>
</ol>
</li>
</ol>
</li>
<li>章</li>
<li>章</li>
</ol>
</body>
</html>運行結(jié)果：
C語言網(wǎng)提供由在職研發(fā)工程師或ACM藍橋杯競賽優(yōu)秀選手錄制的視頻教程，并配有習(xí)題和答疑，點擊了解：
一點編程也不會寫的：零基礎(chǔ)C語言學(xué)練課程
解決困擾你多年的C語言疑難雜癥特性的C語言進階課程
從零到寫出一個爬蟲的Python編程課程
只會語法寫不出代碼？手把手帶你寫100個編程真題的編程百練課程
信息學(xué)奧賽或C++選手的 必學(xué)C++課程
藍橋杯ACM、信息學(xué)奧賽的必學(xué)課程：算法競賽課入門課程
手把手講解近五年真題的藍橋杯輔導(dǎo)課程