CSS - counter-increment 属性_CSS 菜鸟教程

counter-increment 属性将一个或多个 CSS 计数器的值按给定值递增/递减。默认增量为 1。

可能的值

<custom-ident> - 计数器的名称。名称可以是任何字符串值。
<integer> − （可选）定义每次元素在文档中出现时命名计数器的增量。此增量可以为零，甚至可以为负数。如果未提供整数，则计数器将递增 1。
none − 不执行任何增量。

语法

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

适用于

所有 HTML 元素。

CSS counter-increment - <custom-ident> 值

下面是一个演示反增量的示例

<html>
<head>
<style>
	 	body {
	 	 	 counter-reset: section;
	 	}
	 	h1 {
	 	 	 counter-reset: subsection;
	 	}
	 	h1:before {
	 	 	 counter-increment: section;
	 	 	 content: "Section " counter(section) ". ";
	 	}
	 	h2:before {
	 	 	 	 	counter-increment: subsection;
	 	 	 	 	content: counter(section) "." counter(subsection) " ";
	 	}
</style>
</head>
<body>
	 	<h1>HTML tutorials</h1>
	 	<h2>HTML Tutorial</h2>
	 	<h2>XHTML Tutorial</h2>
	 	<h2>CSS Tutorial</h2>	
	 	<h1>Scripting tutorials</h1>
	 	<h2>JavaScript</h2>
	 	<h2>VBScript</h2>
</body>
</html>

CSS counter-increment - <custom-ident> & <integer> 值

下面是一个演示反增量的示例。 counter-increment 属性应用于 h1：：before 选择器。对于每个 h1 元素，它将 head-counter 计数器的值增加 2。

<html>
<head>
<style>
	 	body {
	 	 	 counter-reset: head-counter;
	 	}
	 	h1::before {
	 	 	 counter-increment: head-counter 2;
	 	 	 content: "Counter: " counter(head-counter) " - ";
	 	}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h1>Heading 2</h1>
<h1>Heading 3</h1>
<h1>Heading 4</h1>
<p>The above example shows the usage of counter increment.<p></p>
</body>
</html>

<< CSS - Content 属性 CSS - counter-reset 属性 >>