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的自定义计数器样式。我们指定了循环系统，该系统循环遍历符号Ⓐ、Ⓑ、Ⓒ和Ⓓ。我们还将空格设置为计数器的后缀。

Open Compiler

<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>

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS @counter-styles - 字母计数器样式

以下示例演示了使用字母的@counter-styles属性的用法。

@counter-style规则用于定义一个名为alphabetic的新计数器样式。
system 属性设置为alphabetic，以指定计数器应使用字母字符。
symbols 属性用于定义从'a'到'c'的字母字符列表。
ul 元素的样式设置为 list-style 属性，该属性设置为alphabetic，这将alphabetic计数器样式应用于列表。

Open Compiler

<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描述符不受大多数浏览器支持。

打印页面