css 实现计数器_CSS计数器入门

css 实现计数器

As web developers, proper representation of information is an important feature. One way to properly display information is by denoting hierarchy, answering the question of "what comes first?".

作为Web开发人员，正确表示信息是一项重要功能。 正确显示信息的一种方法是表示层次结构，回答“先来什么？”的问题。

One sure way to denote hierarchy is by numbering objects. Apart from the ordered list, there is no other element that allows us to increment order in CSS. If we wanted to display numbers like we have above, we had to do some preprocessing. Keeping track of the index, making sure to auto-increment it etc. Something like this.

表示层次结构的一种可靠方法是对对象编号。 除了有序列表之外 ，没有其他元素可以让我们增加CSS的顺序。 如果要像上面一样显示数字，则必须进行一些预处理。 跟踪索引，确保自动递增等。类似这样的事情。

<ul class="numbered-list">
    <?php for ($i = 1; $i <= $posts->total_count; $i++): ?>
    <li class="numbered-list__item">
        <span class="numbered-list__counter">
            <?php echo $i ?>
        </span>
        <!-- Remaining markup -->
    </li>
    <?php endfor ?>
</ul>

This is good up to a point, but it has its limitations. What if we wanted to use alphabets, Roman numerals, Greek characters like etc. Implementing any of this requires the use of custom libraries.

在某种程度上，这是好的，但是它有其局限性。 如果我们想使用字母，罗马数字，希腊字符之类的话，该怎么办。要实现这些功能，都需要使用自定义库。

Thankfully, with CSS we can keep track of things like this without breaking a sweat.

幸运的是，借助CSS，我们可以不遗余力地跟踪此类事件。

计数器重置和计数器增量 (