CSS - 计数器

在 CSS 中，计数器充当用于编号目的的变量。它们可以通过 css 规则来增加或减少。Css 计数器使我们能够根据内容的位置修改内容的呈现方式。例如，您可以使用计数器自动为段落、标题和列表分配编号。

CSS 计数器 - 嵌套计数器

我们可以使用 counters（）函数以及 counter-reset 和 counter-increment 属性来创建带有嵌套计数器的大纲列表。此技术允许您为不同级别的嵌套自动生成计数器。

以下示例使用 <ol> 元素创建一个嵌套结构，以演示计数器的嵌套。


<html>
<head>
	 <title>Nesting of Counter</title>
	 <style>
	 	 	 ol {
	 	 	 	 	counter-reset: section;
	 	 	 	 	list-style-type: none;
	 	 	 }
	 	 	 li::before {
	 	 	 	 	counter-increment: section;
	 	 	 	 	content: counters(section, ".") " ";
	 	 	 }
</style>
</head>
<body>
	 	<ol>
	 	 	 <li>Section 1
	 	 	 <ol>
	 	 	 	 <li>Subsection 1.1</li>
	 	 	 	 <li>Subsection 1.2</li>
	 	 	 	 <li>Subsection 1.3</li>
	 	 	 </ol>
	 	 </li>
	 	 <li>Section 2
	 	 	 <ol>
	 	 	 	 <li>Subsection 2.1</li>
	 	 	 	 <li>Subsection 2.2</li>
	 	 	 	 <li>Subsection 2.3</li>
	 	 	 </ol>
	 	 </li>
	 	 <li>Section 3
	 	 	 <ol>
	 	 	 	 <li>Subsection 3.1</li>
	 	 	 	 <li>Subsection 3.2</li>
	 	 	 	 <li>Subsection 3.3</li>
	 	 	 </ol>
	 	 </li>
	 </ol>
</body>
</html>

CSS 计数器 - 反向计数器

反向计数器是一种特殊的计数器，它向后计数而不是向前计数。要创建反向计数器，请在使用 counter-reset 设置它时使用 reversed（）函数命名它。

反向计数器从默认初始值开始，该值等于元素数，而不是零。这意味着它可以简单地从元素数量倒计时到一个。

语法


 counter-reset: reversed(counter name);

Reversed counter（反向计数器）属性仅受 Firefox 浏览器支持

以下示例演示了反向计数器（在 Firefox 浏览器中执行此示例）。


	
<html>
<head>
<style>
	 	body {
	 	counter-reset: reversed(
	 	section);
	 	}
	 	p::before {
	 	counter-increment: section -1;
	 	content: "Section " counter(section) ": ";	
	 	}
</style>
</head>
<body>
	 	<p>This is fourth paragraph</p>
	 	<p>This is Third paragraph</p>
	 	<p>This is second paragraph</p>
	 	<p>This is first paragraph</p>
</body>
</html>

计数器的名称不应为 none、inherit 或initial。如果是这种情况，则该声明被忽略。

CSS 计数器 - 相关属性

以下是计数器的 CSS 属性列表：

属性	值
counter-reset	它用于创建或重置计数器。
counter-set	它用于为给定值设置计数器。
counter-increment	它用于递增计数器值。
counter()	它提供了一个字符串，表示命名计数器的当前值。
counters()	它用于处理嵌套计数器。
@counter-styles	它用于创建自定义计数器样式。
contain	确定当元素的宽度太大而无法放入其容器中时，元素的内容如何表现。

打印本页