CSS 函数 - counter（）

CSS counter（） 函数为您提供一个字符串，显示命名计数器的当前值。通常，它用于伪元素的 counter 属性。

可能的值

<counter-name> - 这是计数器的唯一名称，必须与 counter-reset 和 counter-increment 中使用的大小写完全匹配。名称不能以两个连字符开头，并且不能是 none、unset、initial或inherit。
<counter-style> - 这是可选的。计数器的样式（可以是 list-style-type 的值或@counter样式的值或 symbols（） 函数。计数样式的名称可以很简单，例如数字、字母或符号等。

语法


counter(<countername>, <counterstyle>)

CSS counter（） - 基本示例

下面是一个演示 counter（） 函数的示例。


<html>
<head>
<style>
	 	.demo-counter {
	 	 	 counter-reset: item-counter;
	 	}
	 	.demo-counter li {
	 	 	 list-style-type: none;
	 	 	 counter-increment: item-counter;
	 	}
	 	.demo-counter li::before {
	 	 	 content: counter(item-counter) ". ";
	 	}
</style>
</head>
<body>
	 	<ul class="demo-counter">
	 	 	 <li>First item</li>
	 	 	 <li>Second item</li>
	 	 	 <li>Third item</li>
	 	 	 <li>Fourth item</li>
	 	 	 <li>Fifth item</li>
	 	</ul>
</body>
</html>

CSS counter（） - 使用两种样式。

该程序演示了 counter（） 函数与两种不同计数器样式的用法。


<html>
<head>
<style>
	 	ul {
	 	 	 counter-reset: demo-counter;
	 	 	 list-style: none;
	 	 	 margin: 10px;
	 	 	 padding: 10px;
	 	}
	 	li {
	 	 	 counter-increment: demo-counter;
	 	 	 margin-bottom: 1em;
	 	}
	 	li::before {
	 	 	 content: "[" counter(demo-counter) "] ";
	 	 	 font-weight: bold;
	 	 	 color: #3498db;
	 	}
	 	li::after {
	 	 	 content: " (Level " counter(demo-counter, lower-roman) ")";
	 	 	 font-style: italic;
	 	 	 color: #e74c3c;
	 	}
</style>
</head>
<body>
<ul>
	 	<li>This is the first item</li>
	 	<li>This is the second item</li>
	 	<li>This is the third item</li>
	 	<li>This is the fourth item</li>
	 	<li>And this is fifth and last item</li>
</ul>
</body>
</html>

打印本页