使用CSS计数器美化数字有序列表的实现方法

在web设计中，使用一种井井有条的方法来展示数据是十分重要的，这样用户就可以很清晰的理解网站所展示的数据结构和内容，使用有序列表就是实现数据有组织的展示的一种简单方法。

如果你需要更加深入地控制有序列表数字的样式，你可能会觉得必须通过增加更多的 html DOM 结构或者通过 JavaScript 才能做到。幸运的是，使用 CSS计数器 可以更加容易的解决这个问题。

在这篇教程中，我们将学习到什么是 CSS计数器 和一些使用案例。

有序列表的问题

当你写了一个如下的有序列表，浏览器会自动在列表项前面加上数字

<ol>
    <li>My First Item</li>
    <li>My Second Item</li>
    <li>My Third Item</li>
</ol>

这看起来很好，但是它不允许你对数字进行样式调整。假如，你需要把列表前的数字放进一个圆圈里来修饰列表，你该怎么做呢？

一种方法是完全删除列表，并自己手动添加数字。

<div>
    <span>1</span> My First Item

</div>
<div>
    <span>2</span> My Second Item
</div>
<div>
    <span>3</span> My Third Item
</div>

div {
    margin-bottom: 10px;
}
div span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #000;
    color: #fff;
}

这确实是我们想要做的效果，但是也有一些缺点。首先，手动添加数字是很麻烦的。如果你需要更改一个编号，你必须一个接一个地改变它们。面对这种情况，你可以使用 JavaScript 动态添加 <span> 标签来解决这些问题，但这会为 DOM 添加更多的节点，从而导致大量内存占用。

在大多数情况下，最好使用CSS计数器。让我们来看看原因。

CSS计数器简介

CSS计数器是网页范围变量，其值可以使用 CSS 规则更改。

首先，使用 counter-reset 属性设置计数器。list-number 是此处使用的变量名。

div.list {
    counter-reset: list-number;
}

接着，使用 counter-increment属性来增加计数器的值。

div.list div {
    counter-increment: list-number;
}

现在，每次出现 div.listdiv 元素时，list-number 变量都会增加一。

最后，使用含有设置 content属性和 counter()函数的 :before 伪元素来展示数字。

div.list div:before {
    content: counter(list-number);
}

这里是完整代码:

<div class="list">
    <div>My first item</div>
    <div>My second item</div>
    <div>My third item</div>
</div>

div.list {
    counter-reset: list-number;
}

/** 可以在:before 为元素中使用 counter-increment **/