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>

打印页面