@counter-style

语法

@counter-style thumbs {
  system: cyclic;
  symbols: "\1F44D";
  suffix: " ";
}

@counter-style @ 规则由一个计数器样式名称来标识，并且可以使用由一个或多个描述符及其值组成的 <declaration-list> 来微调已命名计数器的样式。

计数器样式名称

<counter-style-name>

为你的计数器样式提供一个名称。它被指定为一个不带引号且区分大小写的 <custom-ident>。该值不应等于 none。与所有自定义标识符一样，你的计数器样式的值不能是 CSS 全局关键字。避免使用其他的 CSS 枚举属性值，包括列表和计数器样式属性的值。你的计数器名称不能是 list-style-type 属性值中不区分大小写的 decimal、disc、square、circle、disclosure-open 和 disclosure-closed。

备注： 不可覆盖的计数器样式名称 decimal、disc、square、circle、disclosure-open 和 disclosure-closed 不能用作自定义计数器的名称。但是，它们在其他需要 <counter-style-name> 数据类型的上下文中是有效的，例如在 system: extends <counter-style-name> 中。

描述符

system

指定用于将计数器的整数值转换为字符串表示形式的算法。如果值为 cyclic、numeric、alphabetic、symbolic 或 fixed，则还必须指定 symbols 描述符。如果值为 additive，则还必须指定 additive-symbols 描述符。

symbols

指定将用于标记表示的符号。符号可以包含字符串、图像或自定义标识符。如果 system 描述符设置为 cyclic、numeric、alphabetic、symbolic 或 fixed，则此描述符是必需的。

additive-symbols

为加法系统定义加法元组。虽然 symbols 描述符中指定的符号被大多数算法用于构造标记表示，但加法计数器系统（如罗马数字）由一系列带权重的符号组成。该描述符是一个计数器符号及其非负整数权重的列表，按权重降序排列。如果 system 描述符设置为 additive，则此描述符是必需的。

negative

指定当值为负数时，要追加或前置到计数器表示中的符号。

prefix

指定应前置到标记表示的符号。前缀在最后阶段添加到表示中，在由 negative 描述符为负计数器值添加的任何字符之前。

suffix

与 prefix 描述符类似，指定一个附加到标记表示后的符号。后缀位于标记表示之后，包括由 negative 描述符为负计数器值添加的任何字符之后。

range

定义计数器样式适用的值范围。如果一个计数器样式被用来表示一个超出此描述符所定义范围的计数器值，那么该计数器样式将回退到其 fallback 样式。

pad

当你需要标记表示具有最小长度时使用。例如，如果你希望计数器从 01 开始，然后是 02、03、04 等，那么就应该使用 pad 描述符。对于大于指定 pad 值的表示，标记将正常构造。

speak-as

描述语音合成器（如屏幕阅读器）应如何播报计数器样式。例如，根据此描述符的值，列表项标记的值可以被读作数字或字母（对于有序列表），或作为音频提示（对于无序列表）。

fallback

指定在指定的系统无法构造计数器值的表示，或者计数器值超出了指定的 range 范围时，要回退到的系统的计数器名称。如果回退计数器也无法表示该值，则将使用该计数器的回退（如果指定了的话）。如果没有描述回退计数器，或者回退系统链都无法表示一个计数器值，那么它最终将回退到 decimal 样式。

正式语法

@counter-style = 
  @counter-style <counter-style-name> { <declaration-list> }  

示例

使用 counter-style 指定符号

@counter-style circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";
}

上述 counter-style 规则可以像这样应用于列表

.items {
  list-style: circled-alpha;
}

以上代码会产生以下结果

<ol class="items">
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
</ol>
<p>...</p>
<ol class="items" start="25">
  <li>twenty-five</li>
  <li>twenty-six</li>
  <li>twenty-seven</li>
  <li>twenty-eight</li>
</ol>

在演示页面（代码）上查看更多示例。

预制计数器样式

在预制计数器样式文档中可以找到超过 100 个 counter-style 代码片段的集合。该文档提供了满足世界各地语言和文化需求的计数器。

计数器样式转换器从这个列表中提取数据，用于测试和创建可复制粘贴的计数器样式代码。

规范

浏览器兼容性

另见

• counter()
• counters()
• symbols()
• list-style、list-style-image、list-style-position、list-style-type
• CSS 计数器样式模块