我是小雨小雨，专注于更新有趣、实用内容的小伙，如果内容对大家有一点帮助，那么就请动动手指，给个关注、点赞支持一下吧。 ^ - ^
序言
前两天接到一个需求，其中包括一个有序的列表，我们今天就来看看这个有序怎么做更方便、简单。
当然，这个功能很简单：
- 可以手动写死...
- 可以循环插入dom，用索引做前缀。原生循环或者利用框架的循环
- 也可以用三行搓手手(css)自动计数
今天主要说说如何用css来计数
原理与介绍
原理很简单，利用伪元素的content + counter()/counters() + counter-reset + counter-increment计数四剑客即可，但是咱们需要先了解一下这几个属性是什么，才能得心应手！
- content(): 用于向伪元素中插入元素
- counter-reset: 设置命名计数器，可设置多个。格式为 (计数器名称 初始值) (计数器名称 初始值) ...
- counter-increment: 用于增加某个计数器的值，可指定增加的具体值，可设置多个，格式同上。
- counter系列(支持ie8以上)
描述 参数1 参数2 参数3 counter() 返回 命名计数器的当前值，一般与伪元素的content()配合使用定义的命名计数器 命名计数器的显示样式，例：阿拉伯数字 1改成罗马数字Ⅰ无 counters() 升级版的counter()，支持嵌套 定义的命名计数器 命名计数器连接字符 命名计数器的显示样式，例：阿拉伯数字 1改成罗马数字Ⅰ
可能看完死板的定义，还不能立马理解改如何做，所以这边画了个图：
以码为兵，驰马试剑
咱们看两个示例，加深一波理解。
首先是counter():
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent{
counter-reset: child-number; /* 看这 */
box-sizing: border-box;
border: 1px solid black;
padding: 10px;
}
.child{
counter-reset: grandson-number; /* 看这 */
box-sizing: border-box;
border: 1px solid blue;
margin: 5px;
}
.child:before{
content: counter(child-number); /* 看这 */
counter-increment: child-number; /* 看这 */
}
.grandSon{
box-sizing: border-box;
border: 1px solid red;
margin: 5px;
}
.grandSon:before{
content: counter(grandson-number); /* 看这 */
counter-increment: grandson-number; /* 看这 */
}
</style>
</head>
<body>
<div class="parent">父亲 <!-- 容器 -->
<div class="child">儿子</div>
<div class="child">儿子</div>
<div class="child">儿子</div>
<div class="child">儿子 <!-- 嵌套容器 -->
<div class="grandSon">孙子</div>
<div class="grandSon">孙子</div>
<div class="grandSon">孙子</div>
</div>
</div>
</body>
</html>
上面的例子是一个嵌套的带索引的列表，我们使用了两个counter-reset定义了两个容器，来表示嵌套，当然我们也可以使用counters()简化这个操作。
再看看counters():
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
counter-reset: box-number; /* 看这 */
box-sizing: border-box;
border: 1px solid black;
padding: 10px;
margin: 5px;
}
.box:before {
content: counters(box-number, '.'); /* 看这 */
counter-increment: box-number; /* 看这 */
}
.box {
box-sizing: border-box;
border: 1px solid red;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">容器
<div class="box">内容</div>
<div class="box">内容</div>
<div class="box">内容</div>
<div class="box">内容
<div class="container">容器
<div class="box">内容</div>
<div class="box">内容</div>
<div class="box">内容</div>
</div>
</div>
</div>
</body>
</html>
conters()的会搜索所有的容器，然后将命名计数器收集、拼接然后展示。
上面两个demo的区别可自行观察，如果有问题，欢迎评论区一起讨论交流.
结束是一个新的开始
这就是本次主题的全部内容，日后会坚持至少每周一更的频率，欢迎志同道合朋友一起讨论、交流。
最后，如果本文对你有帮助，希望得到你的支持。