1、计数器的作用
向已存在的html文本内容增添序号
2、如何使用计数器
1、定义计数器
属性:counter-reset
作用:定义一个计数器，并且设置初始值为0
body{
counter-reset:计数器名称 初始值 计数器名称 初始值;
}
body{
counter-reset:count 10;
}
2、设置计数器增量
可以单独设置某一选择器使用计数器时的增量，默认值是1
属性:counter-increment
div{
counter-increment:count 10;
}
3、使用计数器
通过 counter(计数器名称) 来使用计数器
div:before{
content:"第"counter(count)"章";
}
<!DOCTYPE html>
<html>
<head>
<title> 内容生成 </title>
<meta charset="utf-8"/>
<meta name="HSW" content="">
<meta name="Keywords" content="">
<style>
/*1、声明计数器,名称为mycounter,初始值为0*/
body {
counter-reset:mycounter 0;
}
/*2、在h1中实现数字的增长，即在h1中设置计数器的增量 1*/
h1 {
counter-increment:mycounter 1;
}
/*3、在h1中使用计数器*/
h1:before {
content:"第"counter(mycounter)"章";
}
</style>
</head>
<body>
<h1>Web 基础知识</h1>
<h1>HTML 快速入门</h1>
<h1>网页中的文本</h1>
</body>
</html>
