@counter-style

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

<counter-style-name>

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

注意：不可覆盖的计数器样式名称 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

类似于前缀描述符，指定附加到标记表示的符号。后缀位于标记表示之后，包括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 circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";
}

上述计数器样式规则可以应用于如下列表

.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 计数器样式模块