CSS - @counter-styles

CSS 的@counter-styles at-規則允許作者建立標準樣式中未包含的自定義計數器樣式。@counter-styles規則概述瞭如何將計數器的值轉換為字串表示形式。

語法

@counter-style = @counter-style <counter-style-name> { <declaration-list> }

每個@counter-style都有一個名稱和一組與其關聯的描述符。

描述符

描述符	含義
system	指定將計數器的整數值轉換為字串形式的方法。
negative	允許作者在計數器表示的開頭或結尾新增符號，如果值為負數。
prefix	它定義要新增到標記表示開頭的符號。
suffix	它定義要新增到標記表示結尾的符號。
range	它指定計數器樣式有效的數值範圍。
pad	當您希望標記表示具有最小長度時使用。
fallback	指定如果定義的系統無法建立計數器值的表示形式或值超出指定範圍，則使用回退系統。
additive-symbols	當@counter-style system描述符設定為additive時，它允許您定義符號。
symbol	確定用於標記表示的符號。
speak-as	指定螢幕閱讀器和語音合成器如何發音計數器樣式。

大多數瀏覽器不支援或部分支援Symbol和Speak-as描述符。

示例

以下示例演示了@counter-styles屬性的用法。
在此程式碼中，我們使用@counter-style規則定義了一個名為cyclic-counter的自定義計數器樣式。
我們指定迴圈系統，它迴圈遍歷符號Ⓐ、Ⓑ、Ⓒ和Ⓓ。
我們還將空格設定為計數器的字尾。

<html>
<head>
<style>
   /* Define the counter style */
   @counter-style cyclic-counter {
      system: cyclic;
      symbols: Ⓐ Ⓑ Ⓒ Ⓓ ;
      suffix: " ";
   }
   /* Apply the counter style to the elements */
   .democounter {
      counter-reset: my-counter;
      
   }
   .democounter-item::before {
      counter-increment: my-counter;
      content: counter(my-counter, cyclic-counter);
      color: red;
   }
</style>
</head>
<body>
   <div class="democounter">
   <div class="democounter-item">Item 1</div>
   <div class="democounter-item">Item 2</div>
   <div class="democounter-item">Item 3</div>
   <div class="democounter-item">Item 4</div>
   <div class="democounter-item">Item 5</div>
   <div class="democounter-item">Item 6</div>
   <div class="democounter-item">Item 7</div>
   <div class="democounter-item">Item 8</div>
   <div class="democounter-item">Item 9</div>
   <div class="democounter-item">Item 10</div>
   </div>
</body>
</html>

示例

此程式演示了@counter-styles屬性的用法。
@counter-style規則用於定義一個名為alphabetic的新計數器樣式。
system屬性設定為alphabetic，以指定計數器應使用字母字元。
symbols屬性用於定義從'a'到'c'的字母字元列表。
ul元素的樣式設定了list-style屬性為alphabetic，它將alphabetic計數器樣式應用於列表。

<html>
<head>
<style>
   @counter-style alphabetic {
   system: alphabetic;
   symbols: 'a' 'b' 'c';
   }
   ul {
   list-style: alphabetic;
   }
</style>
</head>
<body>
  <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
   <li>Item 5</li>
   <li>Item 6</li>
   <li>Item 7</li>
   <li>Item 8</li>
   <li>Item 9</li>
  </ul>
</body>
</html>

列印頁面