counter-reset：h1; dom中遇到这个就回重置计数器"h1"
counter-increment：h1; dom中遇到这个就回在计数器"h1"上加1
content: counter(h1) "、"; before或after伪元素中使用content显示出计数器的值
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>counter</title>
<style>
h1{
counter-reset: h2;
counter-increment: h1;
}
h2{
counter-increment: h2;
}
h1::before{
content: counter(h1) "、";
padding-right: 10px;
}
h2::before{
content: counter(h1) "." counter(h2);
padding-right: 10px;
}
</style>
</head>
<body>
<h1>标题1</h1>
<h2>标题1-1</h2>
<h2>标题1-2</h2>
<h1>标题2</h1>
<h2>标题2-1</h2>
<h2>标题2-2</h2>
</body>
</html>效果：
