带计数器的自动编号
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 | 创建或重置一个或多个计数器 |