CSS-计数器counter

jiezi

5 年前

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