counter-set

Baseline 2023
Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

counter-set CSS 属性将 CSS 计数器设置为给定值。它会操作现有计数器的值,并且只有在元素上没有给定名称的计数器时才会创建新计数器。

尝试一下

备注: 计数器的值可以通过 counter-increment CSS 属性进行递增或递减。

语法

css
/* 将 "my-counter" 设置为 0 */
counter-set: my-counter;

/* 将 "my-counter" 设置为 -1 */
counter-set: my-counter -1;

/* 将 "counter1" 设置为 1,将 "counter2" 设置为 4 */
counter-set: counter1 1 counter2 4;

/* 取消在不太具体的规则中可能设置的任何计数器 */
counter-set: none;

/* 全局值 */
counter-set: inherit;
counter-set: initial;
counter-set: revert;
counter-set: revert-layer;
counter-set: unset;

counter-set 属性可以指定为以下之一:

  • 一个命名计数器的 <custom-ident>,后面可跟一个 <integer>。你可以指定要重置的计数器数量,每个名称或名称—数字对之间用空格分隔。
  • 关键字值 none

<custom-ident>

要设置的计数器的名称。

<integer>

在元素每次出现时设置计数器的值。如果未指定,则默认为 0。如果当前元素上没有给定名称的计数器,元素将创建一个给定名称的新计数器,起始值为 0(尽管它可能会立即将该值设置或增加为不同的值)。

none

不执行计数器设置。这可以用来覆盖在较不具体的规则中定义的 counter-set

形式定义

初始值none
适用元素所有元素
是否是继承属性
计算值as specified
动画类型按计算值的类型

形式语法

counter-set = 
[ <counter-name> <integer>? ]+ |
none

示例

设置命名计数器

css
h1 {
  counter-set: chapter section 1 page;
  /* 将章节和页面计数器设置为 0,
     将部分计数器设置为 1 */
}

规范

Specification
CSS Lists and Counters Module Level 3
# propdef-counter-set

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
counter-set
list-item
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见