在 CSS 中,计数器充当用于编号目的的变量。它们可以通过 CSS 规则增加或减少。 CSS 计数器使我们能够根据内容的位置修改内容的呈现方式。例如,您可以使用计数器自动为段落、标题和列表分配数字。
CSS 计数器: 嵌套计数器
我们可以将 counters() 函数与 counter-reset和counter-increment属性以创建带有嵌套计数器的轮廓列表。该技术允许您自动生成不同级别嵌套的计数器。
以下示例使用 <ol> 元素创建一个嵌套结构,以演示计数器的嵌套。
<html>
<head>
<title>嵌套计数器</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 计数器: 反转计数器
反转计数器是一种特殊的计数器,可以向后计数而不是向前计数。要创建反向计数器,请在使用计数器重置进行设置时使用reverse()函数对其进行命名。
反向计数器以等于元素数量(而不是零)的默认初始值开始。这意味着它可以简单地从元素数倒数到 1。
语法
counter-reset: reversed(counter name);
仅 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,继承或初始。如果是这种情况,则忽略该声明。
CSS 计数器 - 相关属性
以下是计数器的 CSS 属性列表:
属性 | 值 |
---|---|
counter-reset | 它用于创建或重置计数器。 |
counter-set | 它用于将计数器设置为给定值。 |
counter-increment | 用于增加计数器值。 |
counter() | 它提供了一个字符串,表示命名计数器的当前值。 |
counters() | 它用于使用嵌套计数器。 |
@counter-styles | 用于创建自定义计数器样式。 |
contain | 确定当元素太宽而无法放入其容器时其内容的行为方式。 |