counter-reset

counter-reset 属性允许对元素进行自动编号。就像有序列表 (<ol>) 元素一样。

article {
  counter-reset: section;
}
section {
  counter-increment: section;
}
section h2:before {
  content: counter(section) '. ';
}

counter-reset 属性用于将 CSS 计数器重置为给定值。

它是 CSS 计数器模块的一部分，该模块是 生成内容、自动编号和列表 CSS2.1 规范的一部分，在 生成和替换内容模块 CSS3 规范中进行了扩展。

语法

counter-reset: [<user-ident> <integer>?]+ | none</integer></user-ident>

其中…

• <user-ident></user-ident> 是您要重置的计数器的名称
• <integer></integer> 是重置计数器的值
• none 禁用计数器

body {
  counter-reset: my-awesome-counter 0;
}

注意：整数的默认值为 0。如果在计数器名称后没有设置整数，它将被重置为 0。因此，这按预期工作

body {
  counter-reset: my-awesome-counter;
}

您可以使用以空格分隔的列表同时重置多个计数器，每个计数器在需要时都有其特定值。

body {
  counter-reset: my-awesome-counter 5 my-other-counter;
}

这会将 my-awesome-counter 重置为 5，将 my-other-counter 重置为默认值：0。

您可以将此列表视为：counter1 value1 counter2 value2 counter3 value3 ...。如果省略值，则为 0。

演示

在以下演示中，article 将 section 计数器重置为其默认值（0），该值随后在每个部分出现时递增，然后显示在部分标题之前。

浏览器支持

更多信息

• CSS 生成内容模块级别 3
• MDN 文档

相关帖子

相关