content和counter插入编号
1.加上连续编号
<!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>Document</title>
<style>
h4::before{
content: counter(num)'.';
color: #f00;
}
h4{
counter-increment: num;
}
</style>
</head>
<body>
<h4>标题一</h4>
<h4>标题二</h4>
<h4>标题三</h4>
<h4>标题四</h4>
<h4>标题五</h4>
</body>
</html>
2.指定编号种类
<!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>Document</title>
<style>
h4::before{
content: counter(num,upper-alpha)'.';
color: #f00;
}
h4{
counter-increment: num;
}
</style>
</head>
<body>
<h4>标题一</h4>
<h4>标题二</h4>
<h4>标题三</h4>
<h4>标题四</h4>
<h4>标题五</h4>
</body>
</html>
3.编号嵌套
<!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>Document</title>
<style>
h1::before{
content: counter(num)'.';
}
h1{
counter-increment: num;
counter-reset: littenum; /* 重置小标题编号 */
}
h4::before{
content: counter(littenum)'.';
}
h4{
counter-increment: littenum;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>标题</h1>
<h4>小标题</h4>
<h4>小标题</h4>
<h4>小标题</h4>
<h1>标题</h1>
<h4>小标题</h4>
<h4>小标题</h4>
<h4>小标题</h4>
<h1>标题</h1>
<h4>小标题</h4>
<h4>小标题</h4>
<h4>小标题</h4>
</body>
</html>
4.总结
- counter属性值对多个项目进行连续编号，计数器可任意命名 （ content:counter(计数器名) ）
- counter-increment属性设置为counter属性值所指定的计数器名
- 在编号中追加文字content的设置方法为：（ content:'第’counter(计数器名)‘个’ ）
- 指定编号种类：content:counter(计数器名，种类) 。例如使用大写字母编号时使用 “upper-alpha”。
- 编号嵌套时需在大标题中使用counter-reset进行编号重置
转载：https://blog.csdn.net/weixin_45729161/article/details/102490782
查看评论