counters()

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

counters() CSS 函数可以在嵌套计数器时组合标记。该函数返回一个字符串，它连接了指定名称的嵌套计数器（如果存在）的当前值以及提供的字符串。第三个可选参数可以定义列表样式。

counters() 函数通常用于伪元素中的 content 属性，但理论上，它可以在任何支持 <string> 值的地方使用。

counters() 函数有两种形式：counters(<name>, <string>) 和 counters(<name>, <string>, <style>)。生成的文本是具有给定 <name> 的所有计数器的值，从最外层到最内层排列，并由指定的 <string> 分隔。计数器以指示的 <style> 渲染，如果未指定 <style>，则默认为 decimal。

试一试

ol {
  counter-reset: index;
  list-style-type: none;
}

li::before {
  counter-increment: index;
  content: counters(index, ".", decimal) " ";
}

<ol>
  <li>Mars</li>
  <li>
    Saturn
    <ol>
      <li>Mimas</li>
      <li>Enceladus</li>
      <li>
        <ol>
          <li>Voyager</li>
          <li>Cassini</li>
        </ol>
      </li>
      <li>Tethys</li>
    </ol>
  </li>
  <li>
    Uranus
    <ol>
      <li>Titania</li>
    </ol>
  </li>
</ol>

语法

css

/* Basic usage  - style defaults to decimal */
counters(counter-name, '.');

/* changing the counter display */
counters(counter-name, '-', upper-roman)

一个计数器本身没有可见效果。counters() 函数（和 counter() 函数）通过返回开发者定义的内容使其有用。

值

counters() 函数接受两个或三个参数。第一个参数是 <counter-name>。第二个参数是连接符 <string>。可选的第三个参数是 <counter-style>。

<counter-name>: 一个<custom-ident>，用于标识计数器，它与 counter-reset 和 counter-increment 属性使用的区分大小写的名称相同。名称不能以两个破折号开头，也不能是 none、unset、initial 或 inherit。另外，对于内联的、一次性使用的计数器，在支持 symbols() 的浏览器中，可以使用 symbols() 函数代替命名计数器。
<string>: 任意数量的文本字符。非拉丁字符必须使用其 Unicode 转义序列进行编码：例如，\000A9 表示版权符号。
<counter-style>: 一个计数器样式名称或一个 symbols() 函数。计数器样式名称可以是预定义样式，如数字、字母或符号，也可以是复杂的长格式预定义样式，如东亚或埃塞俄比亚样式，或者是其他预定义计数器样式。如果省略，计数器样式默认为 decimal。

返回值为一个字符串，其中包含元素 CSS 计数器集中名为 <counter-name> 的所有计数器的所有值，以 <counter-style> 定义的计数器样式（如果省略则为 decimal）表示。返回字符串按从最外层到最内层的顺序排序，并由指定的 <string> 连接。

注意： 有关非连接计数器的信息，请参阅 counter() 函数，该函数省略了 <string> 参数。

正式语法

<counters()> = 
  counters( <counter-name> , <string> , <counter-style>? )  

<counter-style> = 
  <counter-style-name>  |
  <symbols()>           

<symbols()> = 
  symbols( <symbols-type>? [ <string> | <image> ]+ )  

<symbols-type> = 
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed       

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>

示例

比较默认计数器值与大写罗马数字

本示例包含两个 counters() 函数：一个设置了 <counter-style>，另一个默认为 decimal。

HTML

html

<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

CSS

css

ol {
  counter-reset: listCounter;
}
li {
  counter-increment: listCounter;
}
li::marker {
  content:
    counters(listCounter, ".", upper-roman) ") ";
}
li::before {
  content:
    counters(listCounter, ".") " == "
    counters(listCounter, ".", lower-roman);
}

结果

比较 decimal-leading-zero 计数器值与小写字母

此示例包含三个 counters() 函数，每个函数具有不同的 <string> 和 <counter-style> 值。

HTML

html

<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

CSS

css

ol {
  counter-reset: count;
}
li {
  counter-increment: count;
}
li::marker {
  content:
    counters(count, "-", decimal-leading-zero) ") ";
}
li::before {
  content:
    counters(count, "~", upper-alpha) " == "
    counters(count,  "*", lower-alpha);
}

结果

规范

规范
CSS 列表与计数器模块第 3 级 # 计数器函数
CSS Counter Styles Level 3 # 扩展 CSS2

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面上次修改于 2025 年 10 月 10 日，由 MDN 贡献者完成。

在 GitHub 上查看此页面 • 报告此内容存在的问题