--- title: counters() slug: Web/CSS/counters() tags: - CSS - CSS函数 - CSS计数器 translation_of: Web/CSS/counters() ---
{{CSSRef}}

CSS 函数  counters() 是一个嵌套计数器，返回表示指定计数器当前值的连接字符串。counters() 函数有两种形式：counters(name, string) 或 counters(name, string, style)。它通常和伪元素搭配使用，但是理论上可以在支持<string>值的任何地方使用。生成的文本是具有给定名称的所有计数器的值，从最外层到最内层，之间由指定字符串分隔。计数器以指示的样式呈现，如果未指定样式，则默认为十进制。

/* Simple usage  - style defaults to decimal */
counters(countername, '-');

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

一个计数器本身没有可见的效果，而是通过counter()函数（和counters()函数）返回开发人员定义的字符串（或图像） 从而使计数器拥有很棒的作用。

Note: counter() 函数可以与任何CSS属性一起使用，但是对"content"以外的属性的支持是试验性的，对type-or-unit参数的支持很少。

在使用此功能之前，请仔细检查浏览器兼容性表 。

Syntax

Values

<custom-ident> 自定义标识
一个标识计数器的名称，区分大小写，并且与counter-reset和counter-increment中的“名称”相同。名称不能以两个破折号开头，并且不能为none, unset, initial, 或 inherit。
<counter-style> 计数器样式
计数器样式名称或 symbols() 函数，其中计数器样式名称是数字，字母或符号的简单预定义计数器样式，复杂的东亚或埃塞俄比亚长手预定义计数器样式，或其他预定义计数器样式。如果省略，则计数器样式默认为十进制。
<string> 字符串
任意数量的文本字符。非拉丁字符必须使用其Unicode转义序列进行编码：例如，\ 000A9表示版权符号。

Formal syntax

counters( <custom-ident>, <string>, <counter-style>? )

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

where
<counter-style-name> = <custom-ident>

Examples

default value compared to upper Roman

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

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

Result

{{EmbedLiveSample("default_value_compared_to_upper_Roman", "100%", 150)}}

decimal-leading-zero compared to lower-alpha

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

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

Result

{{EmbedLiveSample("decimal-leading-zero_compared_to_lower-alpha", "100%", 150)}}

Specifications

Specification Status Comment
{{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}} {{Spec2("CSS3 Lists")}} No change
{{SpecName("CSS2.1", "generate.html#counter-styles", "CSS Counters")}} {{Spec2("CSS2.1")}} Initial definition

Browser compatibility

{{Compat("css.types.counters")}}

See also