很多时候要是实现一行文字前面的序列号的话，可能会直接添加个新元素或者利用before伪元素实现。但如果是多行文字的序列号的话，就不是那么简单了。
恰好，css就有这么个计数器可以实现这个功能。
counter-reset:进行计数器的重置。
counter-increment:进行计数器的递增或递减。
counter():输出计数器。
就以上三个属性。但使用起来可不是这么简单：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
/*counter-reset: dd tt;*/
/*进行计数器的递增，可同时设置两个计数器*/
counter-increment: dd tt;
}
div:before,div:after{
/*counter-increment: dd tt;*/
display: inline-block;
width: 20px;
height: 20px;
margin: 5px;
line-height: 20px;
color: #fff;
text-align: center;
border-radius: 100%;
background-color: #f00;
}
div:before{
/*显示计数器*/
content: counter(dd)
}
div:after{
content: counter(tt);
}
</style>
</head>
<body>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
</body>
</html>
以上的是同一级的计数器，没嵌套。
以下的是有三级的嵌套：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.reset{
padding-left: 20px;
counter-reset: num;
}
.counter{
color: #666;
}
.counter:before{
counter-increment: num;
content: counters(num,‘-‘);
font-family: arial black;
}
</style>
</head>
<body>
<div class="reset">
<div class="counter">
第一级
<div class="reset">
<div class="counter">第二级</div>
<div class="counter">第二级
<div class="reset">
<div class="counter">第三级</div>
<div class="counter">第三级</div>
<div class="counter">第三级</div>
</div>
</div>
<div class="counter">第二级</div>
<div class="counter">第二级
<div class="reset">
<div class="counter">第三级</div>
<div class="counter">第三级</div>
<div class="counter">第三级</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
详情可查看这篇文章
时间： 2024-11-05 13:39:40