CSS 函数

CSS counters() 函数允许您使用嵌套计数器。它提供了一个组合字符串，显示指定计数器的当前值（如果存在）。该函数有两种形式:

  • counters(name, string)

  • counters(name, string) , style)

计数器的值可以通过 content 属性显示。

可能的值

  • <custom-name> - 这是计数器的唯一名称，必须与counter-reset和counter-increment中使用的大小写完全匹配。名称不得以两个连字符开头，并且不能为"none"、"unset"、"initial"或"inherit"。

  • <counter-style> - 这是可选的。计数器的样式（可以是 list-style-type 值或 @counter-style 值或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>