css中 数字自增

CSS中的数字自增功能，通常被称作是“计数器”（counter）功能。该功能能够根据选择器中的元素数量，生成随着元素数量自增的数字。例如，在一个有按顺序排列的列表中，我们可以使用计数器来生成每个列表项具有的数字。

    ol {
        counter-reset: item;
        list-style-type: none;
    }
    li:before {
        content: counter(item) '.';
        counter-increment: item;
    }

在上述代码中，我们首先将ol元素的计数器重置，并将其名称设置为“item”。随后我们展现每个列表项前的数字，通过将其添加到li的before伪元素上。里面的content属性实际上是一个CSS函数，它会返回当前计数器的值，同时在这个数字后面添加一个小数点。最后，我们使用了counter-increment来自增计数器。

除了列表和序号，计数器还可以应用在各种场景中。例如，对于一个多层级的网站导航，我们可以在元素上应用计数器来给出每个层级的层数：

    nav {
        counter-reset: level;
    }
    nav a:before {
        content: counter(level) ' > ';
    }
    nav ul {
        counter-increment: level;
    }

在上述代码中，我们同样进行了计数器的重置，并将其命名为“level”。通过在链接前放置了“>”字符，并使用content插入计数器的值，我们完成了导航栏层级数的展示。我们还需要在使用了子级导航的UL元素上自增计数器，以维护正确的层级数。

总而言之，计数器是CSS中一颗非常有用的技巧。通过合理的应用，我们可以生成各种数字序列，实现各种需求。