CSS counter-reset 属性使用方法及示例
counter-resetCSS属性与counter-increment属性组合使用，用于创建自动递增的计数器，并与content属性来显示所生成的计数器值。
下表为此属性的用法说明和版本历史记录，以及该属性在javascript脚本中的使用语法。
| 默认值： | none |
|---|---|
| 适用于： | 所有元素 |
| 继承： | 没有 |
| 可动画制作： | 否。请参见 动画属性。 |
| 版本： | CSS 2、3 |
| JavaScript 语法： | object.style.counterReset="section" |
counter-reset的使用语法
该属性的语法如下：
counter-reset: [ identifier integer ] 1 or more pairs | none | initial | inherit
下面的示例演示了如何使用counter-reset属性。
示例
body {
counter-reset: section;
}
h1 {
counter-reset: category;
}
h1:before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2:before {
counter-increment: category;
content: counter(section) "." counter(category) " ";
}测试看看‹/›
属性值
下表描述了此属性的值。
| 值 | 描述 |
|---|---|
| identifier | 要重置的计数器名称。 |
| integer | 每次出现选择器时重置计数器的值。默认重置值为0。 |
| none | 没有计数器将被重置。这是默认值。 |
| initial | 将此属性设置为其默认值。 |
| inherit | 如果指定，则关联元素采用其父元素counter-reset的属性值。 |
浏览器兼容性
counter-reset属性浏览器的兼容性，下表中的数字表示支持该属性的浏览器最低版本号；所有主流浏览器均支持该属性。
 |
|