counters()

版本： CSS3

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

示例

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

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

浏览器支持


IE8以上版本的浏览器都支持 `counters()`

语法

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

取值

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

实例

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

ol{counter-reset: item;}
li:before{counter-increment: item; content: counters(item,".");}

<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>


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

<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>

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);
}

<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
<meta charset="utf-8"/>

<style>
ol{
	margin:0;
	padding:0002em;
	list-style:none;
	counter-reset:item;
}
li:before{
	counter-increment:item;
	content:counters(item,".");
	color:#f00;
}
</style>
</head>
<body>
<olclass="test">
	<li>node
		<ol>
			<li>node
				<ol>
					<li>node</li>
					<li>node</li>
					<li>node</li>
				</ol>
			</li>
			<li>node</li>
		</ol>
	</li>
	<li>node</li>
	<li>node</li>
</ol>
</body>
</html>

效果图：

返回CSS导航

counters()

示例

浏览器支持

语法

取值

实例