CSS - counter-set 属性

CSS counter-set 属性用于将 CSS 计数器的值更改为指定数字。它可以更改现有计数器的值，并且仅在尚不存在具有相同名称的计数器时才创建新计数器。

可能的值

<custom-ident> - 计数器的名称。名称可以是任何字符串值。
integer - 每次元素出现时计数器设置的默认值。此值可以为零，甚至可以为负数。如果未提供整数，则计数器将重置为零。
none - 不会采取任何措施来设置计数器。

语法


counter-set: <counter name> <integer> ;

适用于

所有 HTML 元素。

CSS counter-set - <custom-ident> 值

此程序演示了 counter-set 属性的用法。在此示例中，我们将 body 元素的 counter-set 属性设置为 head-counter 3，将 head-counter 计数器的值设置为 3。


<html>
<head>
<style>
	 	body {
	 	 	 counter-set: head-counter 3;
	 	}

	 	h1::before {
	 	 	 counter-increment: head-counter;
	 	 	 content: "Counter: " counter(head-counter) " - ";
	 	}

	 	h2::before {
	 	 	 counter-increment: head-counter;
	 	 	 content: "Sub-counter: " counter(head-counter) 	" - ";
	 	}

	 	h3::before {
	 	 	 counter-increment: head-counter;
	 	 	 content: "Sub-sub-counter: " counter(head-counter) 	" - ";
	 	}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h3>Heading 3</h3>
</body>
</html>

CSS 计数器集 - <integer> 值

该程序演示了具有整数值的计数器集属性的用法。此代码将展示值为 -5 的 counter-set 属性的用法。 counter-set 属性应用于 body 元素，将 item-counter 计数器的值设置为 -5。


<html>
<head>
<style>
	 	body {
	 	 	 counter-reset: item-counter -5;
	 	}

	 	.counter-item::before {
	 	 	 counter-increment: item-counter;
	 	 	 content: counter(item-counter) " -";
	 	}
</style>
</head>
<body>
	 	<div class="counter-item">Item 1</div>
	 	<div class="counter-item">Item 2</div>
	 	<div class="counter-item">Item 3</div>
	 	<div class="counter-item">Item 4</div>
</body>
</html>

打印本页