counters()

翻译不完整。 请帮助我们翻译这篇文章!

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-resetcounter-increment中的“名称”相同。名称不能以两个破折号开头,并且不能为noneunsetinitial, 或 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

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

Specifications

Specification Status Comment
CSS Lists Module Level 3
CSS Counters
Working Draft No change
CSS Level 2 (Revision 1)
CSS Counters
Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
counters()Chrome Full support 1Edge Full support 12Firefox Full support 1.5IE Full support 8Opera Full support 10Safari Full support 3WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support

See also