CSS content 计数器
CSS 计数器通过一个变量来设置,根据规则递增变量。
使用计数器自动编号
CSS 计数器根据规则来递增变量。
CSS 计数器使用到以下几个属性:
counter-reset
- 创建或者重置计数器,给计算器命名。注意声明计算器不能在自身 使用计数器的标签声明,要在父级 或者在前的兄弟元素上声明才可以counter-increment
- 递增变量,设置计算器的递增值,content
- 插入生成的内容counter()
或counters()
函数 - 将计数器的值(名称)添加到元素
要使用 CSS 计数器,得先用 counter-reset 创建:
以下实例在页面创建一个计数器 (在 body 选择器中),每个 h2元素的计数值都会递增,并在每个 h2 元素前添加 "Section <计数值>:"
属性 | 描述 |
---|---|
content | 使用 ::before 和 ::after 伪元素来插入自动生成的内容 |
counter-increment | 递增一个或多个值 |
counter-reset | 创建或重置一个或多个计数器 |
- counter-reset
该属性定义计数器的名称,可以同时定义多个计数器,定义数字时代表初始值,缺省默认为0:
div.count{
counter-reset: count1 count2;
}
/* count1 和 count2 是计数器名称 自定义命名*/
如上代码定义两个计数器count1和count2,初始默认为0。
- counter-increment
该属性接收两个参数,第一个参数代表计数器的名称,第二个代表每次递增的值,缺省时默认为1
div.count:before{
counter-increment: count1 2;
}
此行代码定义计数器count1单次自增值为,此时计数器默认初始值为0+2=2;若这里将数字2缺省,则默认自增值为1,此时计数器初始值为0+1=1。
- counter()/counters()
该方法为计数器调用方法,接收两个参数,第一个参数为计数器名称,第二个为数值类型
计数器使用案例
- 基础计数案例
html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>counter&content</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
/* counter-reset在父级设置计数器变量 */
counter-reset: count;
}
p:before {
/*counter-increment设置计数器的步长: 计数器名称 步长*/
counter-increment: count 2;
/* counter()使用计数器 */
content: counter(count);
}
</style>
</head>
<body>
<p>个盒子</p>
<p>个盒子</p>
<p>个盒子</p>
<p>个盒子</p>
<p>个盒子</p>
<p>个盒子</p>
<p>个盒子</p>
<p>个盒子</p>
</body>
</html>
- 智能识别分段计数
html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>counter&content</title>
<style>
html {
counter-reset: section;
}
h2 {
counter-reset: subsection;
}
h2:before {
counter-increment: section 1;
content: '第'counter(section) '篇 ''花'
}
p:before {
counter-increment: subsection 1;
/* 比较智能可以识别分段 */
content: '第'counter(section) '篇的第'counter(subsection) '段 '
}
</style>
</head>
<body>
<h2>标题一 </h2>
<p>标题一的内容1</p>
<p>标题一的内容2</p>
<p>标题一的内容3</p>
<h2>标题二</h2>
<p>标题二的内容1</p>
<p>标题二的内容2</p>
<p>标题二的内容3</p>
</body>
</html>