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的顺序。 如果要像上面一样显示数字，则必须进行一些预处理。 跟踪索引，确保自动递增等。类似这样的事情。

    
    
     total_count; $i++): ?>    
     
                    
                       
          
    
     
    

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，我们可以不遗余力地跟踪此类事件。

( )

Before we start counting with CSS, you should know that counting involves two things: reset and Increment. Reset is where we reset our counter or give our counter a starting point. While Increment actually increments the counter. Let's quickly drop our markup.

在开始使用CSS进行计数之前，您应该知道计数涉及两件事： reset和Increment 。 重置是我们重置计数器或为计数器提供起点的位置。 而“增量”实际上是使计数器递增。 让我们快速删除标记。

All we need is a basic, yet simple to understand markup. In our css file, we need to define our reset and increments.

我们需要的只是一个基本但易于理解的标记。 在我们的css文件中，我们需要定义我们的重置和增量。

    
    
     
                Minion ipsum    
    

Let's set <ul class="numbered-list"></ul> as the reset point. To do that, we simply do.

让我们将<ul class="numbered-list"></ul>为重置点。 为此，我们只需这样做。

.numbered-list {
         counter-reset: counter-name;}

*Note: * counter-name can be anything you want it to be.

* 注意：* counter-name可以是您想要的任何counter-name 。

Since we set our reset point, we need to tell <span class="numbered-list__counter"></span> to increment its value. To do that, we use.

由于设置了重置点，因此需要告诉<span class="numbered-list__counter"></span>其值。 为此，我们使用。

.numbered-list__counter {
         counter-increment: counter-name;}

By referencing the above reset point, we tell the counter via counter-increment to start counting. In this case, our example won't work quite yet.

通过参考上述重置点，我们通过counter-increment告诉计数器开始计数。 在这种情况下，我们的示例还无法正常工作。

But since counter increments are generated content like :before and :after, we need to insert counters using the content property, either in :after or :before. Also, the counter css function lets us drop the counter value at the perfect point.

但是由于计数器的增量是生成的内容，如：before和：after ，因此我们需要使用content属性在：after或：before中插入计数器。 同样，使用counter css函数可以使计数器的值下降到理想点。

.numbered-list__counter:before {
         counter-increment: counter-name;    content: counter(counter-name);}

*Note: * I omitted the content styling to keep our CSS to a minimum.

* 注意：*我省略了内容样式以将CSS保持在最低水平。

抵消增量指数 (Offsetting Incremental Index)

The counter-increment can also take a value either positive or negative to change the number of steps used to increase the value.

counter-increment也可以取正或负的值，以更改用于增加该值的步数。

counter-increment: counter-name 2;/* counter-increment: counter-name +2; */

This will increase the increment with a multiple of 2. To reverse the increment, you can use a negative value to decrement the value by a multiple of the index provided.

这将使增量增加2的倍数。要反转增量，可以使用负值将值减小所提供索引的倍数。

counter-increment: counter-name -2;

( )

Passing an integer after the counter-reset declaration tells the browser to change the offset of the initial value.

在counter-reset声明之后传递一个整数，告诉浏览器更改初始值的偏移量。

.numbered-list {
         counter-reset: counter-name 2;}

Setting this value to 2 starts the counter at 3 like this. You should also know that the default counter reset value is 0.

将此值设置为2可以使计数器从3开始计数。 您还应该知道默认的计数器重置值为0 。

( )

Reversing counters involves using a negative index on the counter-increment. But this can also get tricky pretty fast because if the list is dynamically generated, the user has to find a way to keep track of the index.

反转计数器涉及在counter-increment上使用负索引。 但这也会很快变得棘手，因为如果列表是动态生成的，则用户必须找到一种跟踪索引的方法。

Personally, what I've have seen people do is something like this.

就个人而言，我见过人们所做的就是这样。

    
    
     total_count; $i++): ?>    
     
                    
                       
          
    
     
    

The counter is reset inline using php to generate the value of counter-reset. In the css file we can then set the counter-increment to a negative value.

使用php内联重置计数器以生成counter-reset的值。 然后，在css文件中，我们可以将counter-increment设置为负值。

( )

Apart from incrementing a counter with numbers, we can also increment them using alphabets, greek characters, roman numerals etc.

除了使用数字递增计数器外，我们还可以使用字母，希腊字符，罗马数字等递增它们。

If you are a fan of roman numerals (like me), then to use roman numerals — all you need to do is simply pass a second parameter (lower-roman) to the counter css function.

如果您喜欢罗马数字（例如我），那么要使用罗马数字-您要做的只是简单地将第二个参数（ lower-roman ）传递给counter css函数。

content: counter(counter-name, lower-roman);

Other options include decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha.

其他选项包括decimal ， decimal-leading-zero ， lower-roman ， upper-roman ， lower-greek ， lower-latin ， upper-latin ， armenian ， georgian ， lower-alpha ， upper-alpha 。

( )

Like they say, "a picture is worth a thousand words". This chart from illustrates how widely supported CSS Counters are. They are well supported in Internet Explorer and Safari, which is saying a lot. So you should not be worried about using CSS Counters, they have massive browser support.

就像他们说的那样：“一张图片值得一千个单词”。 这张图表说明了CSS计数器的支持范围。 可以说，Internet Explorer和Safari很好地支持了它们。 因此，您不必担心使用CSS计数器，它们具有强大的浏览器支持。

Personally, I find CSS counters to be cool. To some people, counting with CSS is nondescript as they are fine with whatever method they have in place, and will continue to use it.

我个人认为CSS计数器很酷。 对于某些人来说，使用CSS计数是无法描述的，因为无论采用哪种方法，他们都可以使用CSS，并且会继续使用它。

翻译自:

css 实现计数器