引言

列表中指示项目的字符称为计数器——它们可以是项目符号或数字。它们使用 list-style-type CSS 属性定义。CSS1 引入了一系列预定义样式作为计数器标记。然后，在 CSS2.1 中，通过添加更多预定义的计数器样式，对初始列表进行了稍微扩展。即使有 14 种预定义的计数器样式，它仍然无法满足全球各种用例。

现在，CSS 计数器样式级别 3 规范在上周达到了候选推荐，它为现有列表添加了新的预定义计数器样式，这些样式应该可以解决大多数常见的计数器用例。

除了新的预定义样式外，该规范还通过引入 @counter-style at-规则（它允许我们定义自定义计数器样式或扩展现有样式）和 symbols() 函数，为全球排版需求提供了开放式解决方案。后者是定义内联样式的简写，当不需要 @counter-style 提供的细粒度控制时很有用。

本文提供使用 CSS 级别 3 的新计数器功能的指南。

@counter-style

@counter-style at-规则由名称标识，并使用一组描述符定义。它获取数值计数器值并将其转换为字符串或图像表示形式。自定义计数器样式定义如下所示

@counter-style blacknwhite {
  system: cyclic;
  negative: "(" ")";
  prefix: "/";
  symbols: ◆ ◇;
  suffix: "/ ";
  range: 2 4;
  speak-as: "bullets";
}

不同的可用描述符具有以下含义

1. system – system 描述符 允许作者指定一种算法，将数值计数器值转换为基本字符串表示形式。例如，cyclic 系统会重复循环遍历提供的符号列表以创建计数器表示形式。
2. negative – negative 描述符 提供了指定其他符号的能力，例如负号，如果计数器值为负数，则将其附加/前置到计数器表示形式。如果只指定了一个符号，它将被添加到标记表示形式的前面。如果指定了第二个值（如下例所示），则将其添加到标记的后面。

   @counter-style neg {
     system: numeric;
     symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
     negative: "(" ")";
   }

   上述计数器样式定义将负标记包装在一对括号中，而不是在前面加上减号。

3. prefix – 指定一个将在最终计数器表示形式之前添加的符号。
4. suffix – 指定一个将在最终计数器表示形式之后添加的符号。suffix 描述符的默认值为句点后跟一个空格。如果需要将句点“.”替换为括号，可以指定 suffix 描述符

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

5. range – range 允许作者定义一个计数器样式适用的值范围。如果计数器值超出指定范围，则使用指定的或默认的回退样式来表示该特定计数器值，例如

   @counter-style range-example {
     system: cyclic;
     symbols: A B C D;
     range:  4 8;
    }

   上述规则将仅对从 4 到 8 开始的计数器值应用样式。回退样式 decimal 将用于其余标记。

6. pad – 正如其名称所示，pad 描述符允许作者在计数器表示形式需要具有最小长度时指定填充长度。例如，如果希望计数器从 01 开始，然后依次为 02、03、04 等，则应使用以下 pad 描述符

   @counter-style decimal-new {
     system: numeric;
     symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
     pad: 2 "0";
   }

   （有关实现相同结果但无需指定计数器符号的更好方法，请参阅下面有关扩展现有系统的部分。）

7. fallback – 回退指定了一种样式，如果指定的系统无法构建计数器表示形式或特定计数器值超出指定范围，则将回退到该样式。
8. symbols 和 additive-symbols – 指定将用于构建计数器表示形式的符号。symbols 描述符在大多数情况下使用，除了指定的系统为“additive”的情况。虽然 symbols 指定单个符号，但 additive-symbols 描述符由所谓的加性元组组成，每个元组都包含一个符号和一个非负权重。指定的符号可以是字符串、url(image-name) 形式的图像或标识符。以下示例使用图像作为符号。

   @counter-style winners-list {
     system: fixed;
     symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);
     suffix: " ";
   }

9. speak-as – 指定语音合成器（如屏幕阅读器）应如何朗读计数器值。例如，作者可以指定将标记符号读出为单词、数字或项目符号的音频提示。以下示例将计数器值读出为数字。

   @counter-style circled-digits {
     system: fixed;
     symbols: ➀ ➁ ➂;
     suffix: ' ';
     speak-as: numbers;
   }
   

   然后，您可以像通常使用预定义计数器样式一样，使用 list-style-type 或 counters() 函数使用命名样式。

   ul {
     list-style-type: circled-digits;
   }

   在受支持的浏览器上，上述计数器样式将呈现如下所示的带标记列表

   

system 描述符

system 描述符 获取预定义算法之一，这些算法描述了如何将数值计数器值转换为其表示形式。system 描述符可以具有cyclic、numeric、alphabetic、symbolic、additive、fixed 和 extends 值。

如果指定的系统为cyclic，它将循环遍历提供的符号列表。到达列表末尾后，它将循环回开头并重新开始。fixed 系统类似，但一旦符号列表用尽，它将采用回退样式来表示其余标记。symbolic、numeric 和 alphabetic 系统与上述两个系统类似，但它们有自己细微的差异。

additive 系统要求指定 additive-symbols 描述符而不是 symbols 描述符。additive-symbols 获取加性元组列表。每个加性元组都包含一个符号及其数值权重。additive 系统用于表示“符号值”编号系统，例如罗马数字。

我们可以使用 additive 系统将罗马数字重写为 @counter-style 规则，如下所示

@counter-style custom-roman {
  system: additive;
  range: 1 100;
  additive-symbols: 100 C, 90 XC, 50 L, 40 XL, 10 X, 9 IX, 5 V, 4 IV, 1 I;
}

扩展现有或自定义计数器样式

extends 系统允许作者基于现有样式创建自定义计数器样式。作者可以使用其他计数器样式的算法，但可以更改其其他方面。如果使用 extends 系统的 @counter-style 规则有任何未指定的描述符，则其值将取自指定的扩展计数器样式。

例如，如果要定义一个新样式，该样式类似于 decimal，但在所有标记值前面都有一个字符串“Chapter”，那么与其创建全新的样式，不如使用 extends 系统扩展 decimal 样式，如下所示

@counter-style chapters {
  system: extends decimal;
  prefix: 'Chapter ';
}

或者，如果需要 decimal 样式从 01、02、03.. 而不是 1、2、3.. 开始编号，则只需指定 pad 描述符即可

@counter-style decimal-new {
  system: extends decimal;
  pad: 2 "0";
}

使用 extends 系统的计数器样式不应指定 symbols 和 additive-symbols 描述符。

有关所有系统值的详细信息和使用示例，请参阅 MDN 上的参考页面。

简写 – symbols() 函数

虽然 @counter-style at-规则允许您定制自定义计数器样式，但通常不需要如此复杂的控制。这就是 symbols() 函数发挥作用的地方。symbols() 允许您将内联计数器样式定义为函数属性。由于以这种方式定义的计数器样式是无名的（匿名的），因此无法在样式表中的其他地方重用它们。

匿名计数器样式示例如下所示

ul {
    list-style-type: symbols(fixed url(one.svg) url(two.svg));
}

更多预定义计数器样式

CSS 列表 3 大大扩展了可用预定义样式的数量。除了之前存在的 decimal、disc、circle 和 square 等预定义样式外，还将 hebrew、thai、gujarati、disclosure-open/close 等其他样式添加到预定义列表中。规范启用的预定义样式的完整列表可以在这里查看。

浏览器支持

对 @counter-style 和 symbols() 函数以及新预定义样式的支持已在Firefox 33 中实现。Google Chrome 尚未实现 @counter-styles 或 symbols() 函数，但已实现大多数新的数字和字母预定义样式。IE 目前尚不支持。支持已在最新版本的 Firefox for Android 和即将推出的 Firefox OS 2.1 中实现，后者支持 @counter-style。对 symbols() 的支持将在 Firefox OS 2.2 中实现。

示例

查看此演示页面，看看您喜欢的浏览器是否支持 @counter-style。