共计 1366 个字符，预计需要花费 4 分钟才能阅读完成。
带计数器的自动编号
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 | 创建或重置一个或多个计数器 |
正文完
