CSS 函数 - counters（）

CSS counters（）函数允许您使用嵌套计数器。它提供了一个组合字符串，用于显示命名计数器的当前值（如果存在）。此函数有两种形式：

counters(name, string)
counters(name, string, style)

counters 的值可以与 content 属性一起显示。

可能的值

<custom-name> - 这是计数器的唯一名称，必须与 counter-reset 和 counter-increment 中使用的大小写完全匹配。名称不能以两个连字符开头，并且不能是 none、unset、initial或inherit。
<counter-style> - 这是可选的。计数器的样式（可以是 list-style-type 的值或@counter样式的值或 symbols（） 函数。计数样式的名称可以很简单，例如数字、字母或符号等。
<string> - 它让我们可以自由地使用尽可能多的文本字符。当涉及到非拉丁字符时，必须使用其 Unicode 转义序列来表示它们。例如，\000A9 代表版权符号。

语法

counters( <custom-ident>, [, [ <counter-style> | none ] ], <string> )

CSS counters（） - 基本示例

该程序演示了 counters（）函数的用法。


<html>
<style>
	 	ul {
	 	list-style: none;
	 	counter-reset: demo-counter;
	 	} 	
	 	ul li {
	 	counter-increment: demo-counter;
	 	background-color: lightgray;
	 	} 	
	 	ul li:before {
	 	content: counters(demo-counter, ".") " - ";
	 	color: red;
	 	}
</style>
<ul>
	 	<li>Chapter A
	 	 	 <ul>
	 	 	 	 	<li>Unit- a
	 	 	 	 	<ul>
	 	 	 	 	 	 <li>Sub-unit</li>
	 	 	 	 	 	 <li>Sub-unit</li>
	 	 	 	 	</ul>
	 	 	 </li>
	 	 	 <li>Unit- b
	 	 	 	 <ul>
	 	 	 	 	 <li>Sub-unit</li>
	 	 	 	 	 <li>Sub-unit</li>
	 	 	 	 </ul>
	 	 	 </li>
	 	 </ul> 	
	 </li>
	 <li>Chapter B
	 	 <ul>
	 	 	 <li>Unit- a
	 	 	 	 <ul>
	 	 	 	 	 <li>Sub-unit</li>
	 	 	 	 	 <li>Sub-unit</li>
	 	 	 	 </ul>
	 	 	 </li>
	 	 	 <li>Unit- b
	 	 	 	 <ul>
	 	 	 	 	 <li>Sub-unit</li>
	 	 	 	 	 <li>Sub-unit</li>
	 	 	 	 </ul>
	 	 	 </li>
	 	 </ul> 	
	 </li>
	 	 </ul> 	
	 </li>
</ul>
</html>

CSS counters（） - 嵌套有序列表

在以下示例中，counters（） 函数用于基于名为 custom-counter 的计数器动态生成内容。

counters（） 函数递增并检索指定计数器的值，从而允许在有序列表元素中自定义列表标记和内容的格式。


<html>
<head>
<style>
	 	ol {
	 	 	 counter-reset: custom-counter;
	 	}
	 	li {
	 	 	 counter-increment: custom-counter;
	 	}
	 	li::marker {
	 	 	 content:
	 	 	 	 	counters(custom-counter, ".", lower-alpha) ") ";
	 	}
	 	li::before {
	 	 	 content:
	 	 	 	 	counters(custom-counter, ". ") " -- "
	 	 	 	 	counters(custom-counter, "]. ", upper-roman);
	 	}
</style>
</head>
<body>
<ol>
	 	<li>
	 	 	 <ol>
	 	 	 	 	<li></li>
	 	 	 	 	<li></li>
	 	 	 	 	<li></li>
	 	 	 </ol>
	 	</li>
	 	<li>
	 	 	 <ol>
	 	 	 	 	<li></li>
	 	 	 	 	<li></li>
	 	 	 	 	<li></li>
	 	 	 </ol>
	 	</li>
	 	<li></li>
	 	<li>
	 	 	 <ol>
	 	 	 	 	<li></li>
	 	 	 	 	<li>
	 	 	 	 	 	 <ol>
	 	 	 	 	 	 	 	<li></li>
	 	 	 	 	 	 	 	<li></li>
	 	 	 	 	 	 	 	<li></li>
	 	 	 	 	 	 </ol>
	 	 	 	 	</li>
	 	 	 </ol>
	 	</li>
</ol>
</body>
</html>

打印本页