system

Baseline 2023

新推出

自 2023 年 9 月起，此功能可在最新的设备和浏览器版本上使用。此功能可能无法在较旧的设备或浏览器上使用。

system 描述符指定用于将计数器的整数值转换为字符串表示的算法。它用于 @counter-style 规则中，以定义所声明样式的行为。

如果 system 描述符中指定的算法无法为特定的计数器值构建表示，那么该值的表示将使用提供的回退（fallback）系统来构建。

语法

css

/* Keyword values */
system: cyclic;
system: numeric;
system: alphabetic;
system: symbolic;
system: additive;
system: fixed;

/* Other values */
system: fixed 3;
system: extends decimal;
system: extends circled-letters;

值

它可以采用以下三种形式之一：

关键字值 cyclic、numeric、alphabetic、symbolic、additive 或 fixed 之一。
关键字值 fixed，可后跟一个整数。
关键字值 extends，后跟一个 <counter-style-name> 值。

这些值包括：

cyclic

循环遍历 symbols 描述符中提供的符号列表。一旦到达列表末尾，循环将回到开头重新开始。此值对于仅有一个符号的基本项目符号样式以及具有多个符号的样式都很有用。必须在 symbols 描述符中至少指定一个符号，否则计数器样式无效。

numeric

将计数器符号解释为按位记数系统中的数字。numeric 系统类似于上面描述的 alphabetic 系统。主要区别在于，在 alphabetic 系统中，symbols 描述符中给出的第一个计数器符号被解释为 1，下一个为 2，依此类推。然而，在 numeric 系统中，第一个计数器符号被解释为 0，下一个为 1，然后是 2，依此类推。

必须在 symbols 描述符中指定至少两个计数器符号，否则计数器样式无效。

alphabetic

将指定的符号解释为字母编号系统中的数字。如果在计数器样式中将字符 "a" 到 "z" 指定为符号，并使用 alphabetic 系统，那么前 26 个计数器表示将是 "a"、"b" 直到 "z"。到此为止，其行为与上面描述的 symbolic 系统相同。然而，在 "z" 之后，它将继续为 "aa"、"ab"、"ac"……

symbols 描述符必须包含至少两个符号，否则计数器样式无效。symbols 描述符中提供的第一个计数器符号被解释为 1，下一个为 2，依此类推。该系统也仅对正计数器值有效。

symbolic

重复地循环遍历 symbols 描述符列表中提供的符号，在每次连续遍历列表时，将符号数量翻倍、三倍等。例如，如果在 symbols 描述符中指定了两个符号“◽”和“◾”，在每次连续的遍历中，它们将变为“◽◽”和“◾◾”，然后在后续遍历中变为“◽◽◽”和“◾◾◾”，依此类推。必须在 symbols 描述符中指定至少一个符号，否则计数器样式无效。此计数器系统仅适用于正计数器值。

additive

用于表示“符号-值”编号系统，例如罗马数字，它不是通过在不同位置重用数字来获得不同的值，而是为更大的值定义额外的数字。这种系统中数字的值可以通过将数字中的各个数字相加来得出。

必须指定一个名为 additive-symbols 的附加描述符，并且至少包含一个加法元组，否则计数器样式规则将无效。加法元组类似于一个复合计数器符号，它由两部分组成：一个正常的计数器符号和一个非负整数权重。加法元组必须按其权重的降序指定，否则该系统无效。

fixed 或 fixed <integer>

定义一组有限的符号，只遍历一次在 symbols 描述符中提供的符号列表。一旦指定的符号被遍历完，就会使用回退的计数器样式。此关键字值在计数器样式值为有限的情况下很有用。必须在 symbols 描述符中指定至少一个符号，否则计数器样式无效。fixed 关键字后面可以跟一个可选的 <integer> 值。如果指定，该 <integer> 值表示列表中将获得符号列表中第一个符号的项。如果省略，integer 的默认值为 1，即将列表中的第一项赋予第一个符号。

extends

通过允许修改扩展计数器样式的某些方面，来扩展另一个浏览器或作者定义的计数器样式的算法。任何未指定的描述符及其值都从指定的扩展计数器样式中继承。如果使用 extends 指定的计数器样式名称尚未定义，则默认将扩展 decimal 计数器样式。

它不能包含 symbols 或 additive-symbols 描述符，否则计数器样式规则将无效。如果一个或多个计数器样式定义与其 extends 值形成循环，浏览器将把所有参与的计数器样式视为从 decimal 样式扩展而来。

注意：当值为 cyclic、numeric、alphabetic、symbolic 或 fixed 时，需要 symbols 描述符。如果设置了 additive 值，则需要 additive-symbols 描述符。

正式定义

相关的 at-rule	`@counter-style`
初始值	`symbolic`
计算值	同指定值

正式语法

system = 
  cyclic                            |
  numeric                           |
  alphabetic                        |
  symbolic                          |
  additive                          |
  [ fixed <integer>? ]              |
  [ extends <counter-style-name> ]

示例

循环计数器

cyclic 值会遍历符号列表，并在必要时重复列表。

CSS

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
</ul>

css

@counter-style fisheye {
  system: cyclic;
  symbols: ◉ ➀;
  suffix: ": ";
}

ul {
  list-style: fisheye;
}

结果

固定计数器

fixed 值只遍历符号列表一次，从 integer 值指示的列表项编号开始单次循环。

CSS

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
</ul>

css

@counter-style circled-digits {
  system: fixed 3;
  symbols: ➀ ➁ ➂;
  suffix: ": ";
}

ul {
  list-style: circled-digits;
}

结果

符号计数器

symbolic 值会循环遍历在 symbols 描述符中定义的列表，在第二次和第三次循环中分别将符号数量翻倍和三倍。

CSS

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
</ul>

css

@counter-style abc {
  system: symbolic;
  symbols: a b c;
  suffix: ". ";
}

ul {
  list-style: abc;
}

结果

字母计数器

CSS

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
</ul>

css

@counter-style abc {
  system: alphabetic;
  symbols: a b c;
  suffix: ". ";
}

ul {
  list-style: abc;
}

结果

数字计数器

此处 symbols 描述符中提供的第一个符号被解释为 0。

CSS

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
</ul>

css

@counter-style abc {
  system: numeric;
  symbols: a b c;
  suffix: ". ";
}

ul {
  list-style: abc;
}

结果

带数字符号的数字计数器

如下例所示，如果将数字 0 到 9 指定为符号，此计数器样式将呈现与十进制计数器样式相同的符号。

CSS

<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
</ul>

css

@counter-style numbers {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  suffix: ".";
}

ul {
  list-style: numbers;
}

结果

加法计数器

此示例使用罗马数字呈现列表。请注意，指定了一个 range。这是因为该表示只在计数器值达到 3999 之前才能产生正确的罗马数字。一旦超出该范围，其余的计数器表示将基于 decimal 样式，即回退样式。如果你需要将计数器值表示为罗马数字，可以使用预定义的计数器样式之一，upper-roman 或 lower-roman，而不是自己重新创建规则。

HTML

我们在 <ol> 元素上使用 start 属性来演示计数不一定从 1 开始。此外，我们在第五个 <li> 元素上使用 value 属性来演示你使用 @counter-style 定义的计数器的行为与原生计数器完全相同。

html

<ol start="48">
  <li>48</li>
  <li>49</li>
  <li>50</li>
  <li>51</li>
  <li value="109">109</li>
  <li>110</li>
  <ol></ol>
</ol>

CSS

css

@counter-style uppercase-roman {
  system: additive;
  range: 1 3999;
  additive-symbols:
    1000 M,
    900 CM,
    500 D,
    400 CD,
    100 C,
    90 XC,
    50 L,
    40 XL,
    10 X,
    9 IX,
    5 V,
    4 IV,
    1 I;
}

ol {
  list-style: uppercase-roman;
  padding-left: 5em;
}

结果

扩展计数器

此示例使用了 lower-alpha（几个原生 list-style-type 计数器值之一）的算法、符号和其他属性，但通过移除计数器表示后的句点（.）并用括号将字符括起来，如 (a) 和 (b)，来对其进行扩展。

HTML

html

<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

CSS

css

@counter-style alpha-modified {
  system: extends lower-alpha;
  prefix: "(";
  suffix: ") ";
}

ul {
  list-style: alpha-modified;
}

结果

规范

规范
CSS Counter Styles Level 3 # counter-style-system

浏览器兼容性

另见

其他 @counter-style 描述符，包括 symbols、additive-symbols、negative、prefix、suffix、range、pad、speak-as 和 fallback
list-style、list-style-image、list-style-position
symbols()，创建匿名计数器样式的函数表示法。

帮助改进 MDN

了解如何贡献

此页面的最后修改时间是 ⁨2025 年 7 月 14 日⁩，由 MDN 贡献者们修改。

在 GitHub 上查看此页面 • 报告此内容的问题