CSS @counter-style 规则

定义和用法

CSS @counter-style 规则用于定义自定义计数器样式。

当预定义的样式不符合需求时，@counter-style 规则允许您定义自己的计数器样式。

实例

为列表指定自定义计数器样式：

@counter-style crown {
  system: cyclic;
  symbols: "\1F451";
  suffix: " ";
}

ul {
  list-style: crown;
}

亲自试一试

CSS 语法

@counter-style countername {
  one or more descriptors
}

属性值

值 描述
countername

定义计数器样式的大小写敏感名称。

注意：计数器名称不能为：none、decimal、disc、square、circle、disclosure-open 或 disclosure-closed。
system

定义将计数器的整数值转换为字符串的算法。

如果 system 设置为：cyclic、numeric、alphabetic、symbolic 或 fixed，则需要 symbols 描述符。

如果 system 设置为：additive，则需要 additive-symbols 描述符。
symbols

定义用于标记的符号（可以是字符串、图像或自定义标识符）。

如果 system 描述符设置为 cyclic、numeric、alphabetic、symbolic 或 fixed，则必需。

HTML UTF-8 符号。
additive-symbols

定义加法系统的加法元组。

加法计数器系统（如罗马数字）由一系列加权符号组成。

描述符是按权重降序排列的计数器符号及其非负整数权重的列表。

如果 system 描述符设置为 additive，则必需。
negative 定义当值为负数时，附加到标记表示的前缀或后缀符号。
prefix 定义应附加到标记表示的前缀符号。
suffix 定义应附加到标记表示的后缀符号。
range

定义计数器样式的值范围。

如果计数器值超出范围，则回退到其备用样式。
pad

如果标记表示必须具有最小长度，则使用此描述符。

例如，如果您希望计数器从 01 开始，依次为 02、03、04 等，则使用 pad 描述符。

对于大于指定 pad 值的计数器，标记将正常构建。
speak-as

定义语音合成器应如何读出计数器样式。

例如，对于有序列表，读出为数字或字母；对于无序列表，读出为音频提示。
fallback

定义如果系统无法构建标记或超出指定范围时，回退的计数器名称。

如果未描述备用计数器或备用系统无法表示计数器值，则回退到十进制样式。

浏览器支持

表格中的数字注明了完全支持该 @ 规则的首个浏览器版本。

Chrome Edge Firefox Safari Opera
91 91 33 17 77