计数器
CSS 中的计数器本质上来说就是由 CSS 维护的变量，计数器的值可以通过 CSS 规则递增来跟踪计数器的使用次数，例如可以使用计数器来自动为网页中的标题编号。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计数器</title>
<style>
ol {
list-style: none;
padding: 0;
margin: 0;
/* 值 -> 计数器的名称(自定义) */
counter-reset: counterList;
}
ol li {
counter-increment: counterList;
}
/* ol li::before {
content: counter(counterList)". ";
} */
ol li::before {
content: "第 "counter(counterList)". 章 ";
}
</style>
</head>
<body>
<ol>
<li>小米手机</li>
<li>华为手机</li>
<li>魅族手机</li>
</ol>
</body>
</html>
CSS的计数器可以配合任何HTML元素(更多是配合列表元素)
1.用来设置CSS的计数器
-
counter-reset属性: 重置计数器的指定值 -
counter-increment属性: 设置计数器每次累加的值2.用来显示CSS的计数器
-
counter()函数 -
counters()函数
counter-reset 属性
CSS counter-reset 属性用来将计数器重置为给定的值。该属性的默认值为 none，其值的类型具有如下 3 种情况：
- 要重置为计数器的名称。该名称可以是字母（A-Z，a-z）、十进制数字（0-9）、连接符（-）、下划线（_）以及转义字符。
- 要在元素每次出现时将计数器重置为的值。如果没有指定，默认值为 0。
- none：不执行计数器复位。
计数器的个数不一定是一个，也可以是多个。如果 counter-reset 属性的值是多个计数器的话，则计数器之间使用空格分隔。如下示例代码展示了 counter-reset 属性设置多个计数器：
h1 {
counter-reset: chapter section 1 page;
}
上述示例代码的含义是：
- 将
chapter和page两个计数器复位为 0。 - 将
section计数器复位为 1。
counter-increment 属性
CSS counter-increment 属性用来设置计数器每次增加的值。该属性的默认值为 none，其值的类型具有如下 3 种情况：
- 要增加为计数器的名称。该名称可以是字母（A-Z，a-z）、十进制数字（0-9）、连接符（-）、下划线（_）以及转义字符。
- 要在元素每次出现时将计数器增加为的值。如果没有指定，默认值为 1。
- none：任何计数器都不能递增。
如果 counter-increment 属性设置多个计数器的递增值的话，计数器之间使用空格进行分隔。如下示例代码展示了 counter-increment 属性设置多个计数器：
h1 {
counter-increment: chapter section 2 page;
}
上述示例代码的含义是：
- 将
chapter和page两个计数器递增为 1。 - 将
section计数器递增为 2。
counter() 函数
CSS counter() 函数用来简单地将计数器的内容显示在 HTML 页面中。counter() 函数返回一个字符串，该字符串表示指定的计数器的当前值。
counter() 函数的语法结构如下所示：
conter(custom-ident, counter-style)
上述语法结构具体说明如下：
custom-ident参数：表示计数器的名称。counter-style参数：表示显示的样式。
counters() 函数
CSS counters() 函数支持计数器的嵌套情况。counters() 函数返回一个字符串，该字符串表示指定的计数器的当前值。
counters() 函数的语法结构如下所示：
conter(custom-ident, string, counter-style)
上述语法结构具体说明如下：
custom-ident参数：表示计数器的名称。string参数：表示计数器嵌套的分隔符，可以是任意数量的文本字符。counter-style参数：表示显示的样式。
扫一扫
74
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
