计数器和列表样式

许多类型的内容最好以 HTML 列表的形式呈现。对于有序列表内容（例如食谱步骤或文章脚注），标记通常也包含信息。CSS 提供了多种方式来控制列表中的计数器。

列出样式

预定义的列表样式类型有很多，支持数字、字母、罗马数字和许多国际计数系统。

除了浏览器支持的样式之外，W3C 还发布了现成的计数器样式，支持 45 种书写系统中的 181 种其他样式。

如果这些选项不符合您的需求，您还可以定义自定义 @counter-style。这样一来，您就可以指定自定义符号、前缀和后缀等。

默认情况下，项目标记是列表中的 outside，位于列表前面，并靠右对齐。您还可以使用 list-style-position: inside 将项目标记放置在列表内。

列表样式用于控制列表项标记的显示方式，而计数器则用于控制要显示的值。对于 <li> 列表项元素，浏览器会创建一个名为 list-item 的计数器，每遇到一个列表项，该计数器就会递增 1。

CSS 计数器会持续统计设置了相应 counter-increment 值的元素被渲染的次数。

如需创建新计数器，请使用 counter-reset 并指定计数器名称和可选的初始值。您通常会在包含所有要统计的元素的父元素上设置此属性。

注意： counter-reset 会使用初始值和方向初始化计数器，不应将其与仅设置现有计数器值的 counter-set 混淆。

然后，在要统计的每个元素上添加 counter-increment 属性。

最后，使用 counter() 函数显示计数器值。

在此示例中，我们希望将脚注的运行计数显示为每个脚注的链接文字。由于我们希望整个文档使用一个计数器，因此我们在正文上设置 counter-reset: note，并在每个脚注链接上递增。

您还可以设置多个计数器来统计不同的项目。在脚注示例中，如果您想显示脚注所在的部分和段落的索引，该怎么办？

可以使用 counter-reset 在正文中创建部分计数，然后在每个 <h2> 元素上递增。我们希望每个部分的段落数都重置，因此我们将在 <h2> 元素上使用 counter-reset，并在 <p> 元素上使用增量。

最后，我们将 content 属性中的计数器值合并。

a:after {
  content: "(S" counter(section) "P" counter(paragraph) "N" counter(note) ")";
  font-size: small;
  vertical-align: super;
}

将一个列表嵌套在另一个列表中会发生什么情况？系统会为每个 <ul> 或 <ol> 元素初始化 list-item 计数器，而使用 counter() 只会返回最内层计数的值。如果您想显示每个嵌套计数器的数量，请使用 counters() 函数，该函数接受计数器名称和分隔符。

li::marker {
  content: counters(list-item, ".")
  }

默认情况下，计数器（包括 <ol> 元素的隐式 list-item 计数器）从 0 开始，并为每个元素递增 1，这意味着第一个元素将计为 1。如果您想倒数到 1，该怎么办？

为此，请将 reversed 属性添加到 <ol>。如果您使用的是标准列表样式，标记将按预期工作。不过，如果您使用的是自定义计数器，则需要将 counter-increment 设置为负值，并手动计算计数器的起始值。