CSS - @counter-styles_CSS 菜鸟教程

CSS @counter-styles 允许作者创建标准样式中未包含的自定义计数器样式。@counter-styles 规则概述了如何将计数器值更改为字符串表示形式。

语法


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

每个 @counter-style 都有一个名称和一组与之关联的描述符。本主题末尾列出了所有描述符。

CSS @counter-styles - 符号计数器样式

该程序演示了使用元件的 @counter-styles 属性的用法。在此代码中，我们使用 @counter-style 规则定义了一个名为 cyclic-counter 的自定义计数器样式。我们指定了循环系统，它在符号（A）、（B）、（C）和（D）之间循环。我们还将一个空格设置为计数器的后缀。


<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	指定将 counter 的整数值转换为字符串形式的方法。
additive-symbols	用于在 @counter 样式系统描述符值配置为 added 时定义计数器符号。
negative	如果值为负数，则允许作者在计数器表示的开头或结尾添加符号。
prefix	定义要添加到标记表示法开头的元件。
suffix	定义要在标记表示之后添加的符号。
range	指定计数器样式有效的值范围。
pad	当您希望标记表示具有最小长度时，可以使用此选项。
fallback	指定在定义的系统无法创建计数器值的表示形式或值超出指定范围时要使用的回退系统。
speak-as	此描述符说明如何解释语音合成器（如屏幕阅读器）的计数器样式。
symbols	定义用于标记表示的符号。

大多数浏览器不支持 descriptors symbols 和 speak-as。

<< CSS - 伪元素 - ::part() CSS 数据类型 - overflow >>