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>
