帶計數器的自動編號
CSS計數器就像“變量”。變量值可以通過CSS規則遞增（它將跟蹤它們被使用的次數）。要使用CSS計數器，我們將使用以下屬性：
counter-reset - 創建或重置計數器
counter-increment - 增加計數器值
content - 插入生成的內容
counter()或counters()函數 - 將計數器的值添加到元素
要使用CSS計數器，必須首先使用counter-reset創建。 下面的示例爲頁面創建一個計數器（在body選擇器中），然後遞增每個<h2>元素的計數器值，並將“選項 < 計數器的值 >：”添加到每個<h2>元素的開頭：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>教程（jc2182.com）</title>
<style>
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "選項 " counter(section) ": ";
}
</style>
</head>
<body>
<h1>使用CSS計數器:</h1>
<h2>HTML教程</h2>
<h2>CSS教程</h2>
<h2>JavaScript教程</h2>
<p><b>注意:</b> 只有在指定了!DOCTYPE時，IE8才支持這些屬性。</p>
</body>
</html>嵌套計數器
以下示例爲頁面（節）創建一個計數器，爲每個<h1>元素（子節）創建一個計數器。對於每個<h1>元素，“section”計數器將計爲“Section < 值的分區計數器 >。”，並且“subsection”計數器將計入每個<h2>元素，記入“<分區計數器的值 >==< 分段計數器的值 >“：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>教程（jc2182.com）</title>
<style>
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment: section;
content: "分區計數器的值 " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h1>HTML教程:</h1>
<h2>HTML教程</h2>
<h2>CSS教程</h2>
<h1>Scripting教程:</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
<h1>XML教程:</h1>
<h2>XML</h2>
<h2>XSL</h2>
<p><b>注意:</b>只有在指定了!DOCTYPE時，IE8才支持這些屬性。</p>
</body>
</html>| 屬性 | 描述 |
|---|---|
| content | 與::before和::after僞元素一起使用，插入生成的內容 |
| counter-increment | 遞增一個或多個計數器值 |
| counter-reset | 創建或重置一個或多個計數器 |