效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题自动编号</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
h1 {
counter-reset: one; /* 创建一个计数器 */
}
h2 {
counter-reset: two;
}
h2:before {
counter-increment: one; /* 自动将计数器加 1 */
content: counter(one) "- "; /* 获取计数器值，把它填写在 content 中 */
}
h3 {
counter-reset: three;
}
h3:before {
counter-increment: two;
content: counter(one) "." counter(two) "- ";
}
h4 {
counter-reset: four;
}
h4:before {
counter-increment: three;
content: counter(one) "." counter(two) "." counter(three) "- ";
}
h5 {
counter-reset: five;
}
h5:before {
counter-increment: four;
content: counter(one) "." counter(two) "." counter(three) "." counter(four) "- ";
}
</style>
</head>
<body>
<h1>主标题</h1>
<h2>标题h2-1</h2>
<h3>标题h3-1</h3>
<h3>标题h3-2</h3>
<h4>标题h4-1</h4>
<h5>标题h5-1</h5>
<h5>标题h5-2</h5>
<h4>标题h4-2</h4>
<h3>标题h3-3</h3>
<h2>标题h2-2</h2>
<h3>标题h3-1</h3>
<h3>标题h3-2</h3>
<h4>标题h4-1</h4>
<h4>标题h4-2</h4>
<h5>标题h5-1</h5>
<h5>标题h5-2</h5>
<h3>标题h3-3</h3>
<h3>标题h3-4</h3>
</body>
</html>