counters()

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

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

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

试一试

语法

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

/* changing the counter display */
counters(countername, '-', 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() 函数。计数器样式名称可以是简单的预定义样式，例如数字、字母或符号，复杂的详细预定义样式，例如东亚或埃塞俄比亚语，或其他 预定义计数器样式。如果省略，则计数器样式默认为十进制。

返回值是一个字符串，包含元素的 CSS 计数器集中名为<counter-name>的所有计数器的所有值，这些值使用由<counter-style>定义的计数器样式（如果省略则为十进制）。返回的字符串按从外到内的顺序排序，并使用指定的<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>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

示例

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

此示例包含两个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);
}

结果

将十进制前导零计数器值与小写字母进行比较

此示例包含三个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
# 计数器函数

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅