counter-reset

优质

小牛编辑

131浏览

2023-12-01

描述 (Description)

counter-reset属性将命名计数器设置为特定值。

可能的值 (Possible Values)

name - 计数器的名称。名称可以是任何字符串值。
integer - 每次元素出现在文档中时定义指定计数器的增量。此增量可以为零，甚至为负。如果未提供整数，则计数器加1。
none - 不执行增量。

适用于 (Applies to)

所有HTML元素。

DOM语法 (DOM Syntax)

object.style.counterReset = "section 1";

例子 (Example)

此示例显示了使用“第1章”，“1.1”，“1.2”等对章节进行编号的方法。

<html>
   <head>
      <style>
         body {
            counter-reset: section;
         }
         h1 {
            counter-reset: subsection;
         }
         h1:before {
            counter-increment: section;
            content: "Section " counter(section) ". ";
         }
         h2:before {
            counter-increment: subsection;
            content: counter(section) "." counter(subsection) " ";
         }
      </style>
   </head>
   <body>
      <h1> xnip.cn</h1>
      <h2> xnip.cn</h2>
      <h2> xnip.cn</h2>
      <h2> xnip.cn</h2>
      <h2> xnip.cn</h2>
   </body>
</html>

'counter-reset'属性遵循级联规则。因此，由于级联，以下样式表只会重置'imagenum' -

h1 { counter-reset: section -1 }
h1 { counter-reset: imagenum 99 }

要重置两个计数器，必须同时指定它们 -

h1 { counter-reset: section -1 imagenum 99 }