在此页

• 句法
• 形式定义
• 形式句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

counter-set CSS property sets a CSS counter to a given value. It manipulates the value of existing counters, and will only create new counters if there isn't already a counter of the given name on the element.

注意： The counter's value can be incremented or decremented using the counter-increment CSS property.

句法

/* Set "my-counter" to 0 */
counter-set: my-counter;
/* Set "my-counter" to -1 */
counter-set: my-counter -1;
/* Set "counter1" to 1, and "counter2" to 4 */
counter-set: counter1 1 counter2 4;
/* Cancel any counter that could have been set in less specific rules */
counter-set: none;
/* Global values */
counter-set: inherit;
counter-set: initial;
counter-set: unset;
					

counter-set property is specified as either one of the following:

• A <custom-ident> naming the counter, followed optionally by an <integer> . You may specify as many counters to reset as you want, with each name or name-number pair separated by a space.
• The keyword value none .

值

<custom-ident>

The name of the counter to set.

<integer>

The value to set the counter to on each occurrence of the element. Defaults to 0 if not specified. If there isn't currently a counter of the given name on the element, the element will create a new counter of the given name with a starting value of 0 (though it may then immediately set or increment that value to something different).

none

No counter set is to be performed. This can be used to override a counter-set defined in a less specific rule.

形式定义

初始值	none
适用于	所有元素
继承	no
计算值	如指定
动画类型	discrete

形式句法

[ <custom-ident> <integer>? ]+ | none
					

范例

Setting named counters

h1 {
  counter-set: chapter section 1 page;
  /* Sets the chapter and page counters to 0,
     and the section counter to 1 */
}
					

规范

规范	状态	注释
CSS Lists Module Level 3 The definition of 'counter-set' in that specification.	工作草案	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
counter-set	Chrome 完整支持 85	Edge 完整支持 85	Firefox 完整支持 68	IE 不支持 No	Opera 完整支持 71	Safari 不支持 No	WebView Android 完整支持 85	Chrome Android 完整支持 85	Firefox Android 完整支持 68	Opera Android 完整支持 60	Safari iOS 不支持 No	Samsung Internet Android 不支持 No

图例

完整支持

完整支持

不支持

不支持

另请参阅

• Using CSS Counters
• counter-increment
• counter-reset
• @counter-style
• counter() and counters() 函数
• content property

元数据

• 最后修改： 2020 年 7 月 17 日

相关话题

1. CSS
2. CSS 参考
3. CSS 计数器样式
4. At-Rules

   1. @counter-style
5. 特性

   1. <custom-ident>
   2. counter-increment
   3. counter-reset
   4. counter-set