HTML | DOM 样式 counterReset 属性介绍

简介

counterReset 属性为 css 样式属性，用于在伪元素中创建或重置计数器。计数器用于生成有序列表或文档中其他项目的编号。

该属性定义了重置哪个计数器以及其初始值。如果未定义初始值或初始值为 none，则计数器将重置为 0。

语法

counter-reset: name number|initial|inherit;

• name: 必需。计数器名称。
• number: 可选。计数器的起始值。
• initial: 设置该属性为它的默认值。
• inherit: 规定该属性应该从父元素继承。

实例

下面是一个基本示例，它使用 counter-reset 属性将计数器设置为从 1 开始的值，并在每个项目前添加一个带圆点的计数器：

/* 定义计数器名为 mycounter */
body {
    counter-reset: mycounter;
}

/* 定义 li 元素伪元素的内容 */
li::before {
    content: counter(mycounter) ".";
    counter-increment: mycounter;
}

兼容性

目前，几乎所有的现代浏览器都支持这个属性，在 IE11 之前的版本中不支持。但是，需要注意的是，IE11 对这个属性的支持有一些限制。

注意点

• 如果计数器名称不存在，将自动创建它。
• 如果你想要在每页的顶部重新开始编号，你需要将计数器定义在 @page 属性中。
• 如果你想要在多个嵌套的列表中使用相同的计数器名称，你需要使用 counter-increment 属性而不是 counter-reset 属性，increment 可以增加当前计数器的值，而 reset 重置计数器的值。

总结

我们介绍了样式属性 counterReset 的简介、语法、实例、兼容性和注意点，它可以用于伪元素中创建或重置计数器，特别用于生成有序列表或文档中其他项目的编号，是 CSS 样式设置中的一种非常有用的属性。