CSS - @counter-styles

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

語法

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

每個@counter-style都有一個名稱和一組與其關聯的描述符。所有描述符都列在本文件的末尾。

CSS @counter-styles - 符號計數器樣式

此程式演示了使用符號的@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>

CSS @counter-styles - 字母計數器樣式

以下示例演示了使用字母的@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>

描述符

下表列出了與@counter-styles相關的所有描述符

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

symbols和speak-as描述符不受大多數瀏覽器支援。

列印頁面