系统

基线 2023

新发布

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

**system** 描述符指定用于将计数器整数 value 转换为字符串表示形式的算法。它用于 @counter-style 中定义已定义样式的行为。

如果 system 描述符中指定的算法无法为特定计数器 value 构造表示形式，则该 value 的表示形式将使用提供的备用系统构造。

语法

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;

值

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

其中一个关键字 value：cyclic、numeric、alphabetic、symbolic、additive 或 fixed。
关键字 value fixed 以及一个整数。
关键字 value extends 以及一个 <counter-style-name> value。

这些 value 包括

cyclic

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

numeric

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

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

alphabetic

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

symbols 描述符必须包含至少两个符号，否则计数器样式无效。symbols 描述符中提供的第一个计数器符号被解释为 1，下一个为 2，依此类推。此系统也是严格定义在正计数器 value 上的。

symbolic

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

additive

用于表示“符号值”记数系统，例如罗马数字，它不是在不同位置重复使用数字以获得不同的 value，而是为更大的 value 定义附加的数字。此类系统中数字的 value 可以通过将数字中的数字相加得出。

必须指定一个名为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 计数器样式级别 3 # counter-style-system

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

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