counter-reset

摘要

counter-reset 属性包含一个或多个计数器的名称列表，每个名称后可选地跟一个整数（否则，整数默认为 0）。每次调用给定元素时，该属性指定的计数器都会被设置为给定的整数。

概述表

初始值

无

适用范围

所有元素

继承

否

媒体

视觉

计算值
:

可动画

否

CSS 对象模型属性
:

语法

• counter-reset: identifier
• counter-reset: integer

值

标识符

计数器的名称，可选地后跟一个整数。

integer

当元素被调用时，计数器被设置的值。默认值为 0。

示例

以下示例演示了使用 counter-reset、counter-increment 和 content 进行自动章节和段落编号。chapter 计数器被设置为 body 元素的零，然后对于遇到的每个 h1 元素递增。section 计数器对于每个 h1 元素重置，对于每个 h2 元素递增。当查看页面时，每个 h1 元素前面会有一个章节标题，格式为 "ChapterX。"，而每个 h2 元素前面会有一个段落编号，格式为 "X.N"。

body {
    counter-reset: chapter;      /* Create a chapter counter */
}
h1 {
    counter-increment: chapter;  /* Add 1 to chapter */
    counter-reset: section;      /* Set section to 0 */
}
h1:before {
    content: "Chapter " counter(chapter) ". ";
}
h2 {
    counter-increment: section;
}
h2:before {
    content: counter(chapter) "." counter(section) " ";
}

查看实时示例

备注

备注

counter-reset 属性可以包含一个或多个计数器的列表，每个计数器后可选地跟一个整数。该整数表示元素每次出现后计数器被设置的值。如果一个元素既重置又递增一个计数器，则计数器首先被重置，然后被递增。如果同一个计数器被指定多次，则每次重置或递增都会按照指定的顺序处理。 counter-increment 和 counter-reset 属性遵循 CSS 级联的规则。给定两个具有相同特异性的样式声明，只有最后遇到的声明才会被处理。有关级联和特异性的更多信息，请参阅了解 CSS 选择器。一个未显示（display 属性设置为 ‘none’）并且不生成内容的伪元素（content 属性设置为 ‘normal’）不能递增或重置计数器。此属性要求 Windows Internet Explorer 处于 IE8 标准模式渲染中。

语法

counter-reset: '[ <identifier> <integer> ]'+

标准信息

• CSS 2.1，第 12.4 节

参见

相关文章

生成和替换的内容

• 生成和替换的内容

• content

• counter-increment

• counter-reset

• list-style-image

• list-style-type

• object-fit

相关页面

• CSSStyleDeclarationCSSStyleDeclaration
• currentStylecurrentStyle
• runtimeStyleruntimeStyle
• stylestyle
• counter-incrementcounter-increment

署名

• Microsoft Developer Network: [Windows Internet Explorer API 参考 文章]