CSS counters() 函式

CSS 的 `counters()` 函式允許您使用巢狀計數器。它提供一個組合字串，顯示已命名的計數器的當前值（如果存在）。此函式有兩種形式：

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

可以使用 `content` 屬性顯示計數器的值。

可能的值

`` − 這是計數器的唯一名稱，必須與在 `counter-reset` 和 `counter-increment` 中使用的名稱完全匹配大小寫。名稱不能以兩個連字元開頭，也不能為 none、unset、initial 或 inherit。
`` − 這是可選的。計數器的樣式（可以是 `list-style-type` 值或 `@counter-style` 值或 `symbols()` 函式）。計數樣式的名稱可以很簡單，例如數字、字母或符號等。
`` − 它使我們可以自由使用任意數量的文字字元。對於非拉丁字元，必須使用其 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>

列印頁面