CSS趣味计数器

发布于 （最后修改: ）

阅读时间 ~ 2 分钟

阅读原文(Read Will Boyd’s original article)

CSS计数器是“晕，竟不知道CSS可以做这啊”这类非常有趣的众多特性之一。简言之，用CSS使你持续某增加某个量，而无需JavaScript。

简单计数器

我们从这个简单的分页示例开始：

   Check out this Pen!

你见到的这些数字不是硬编码在HTML中。它们是以下CSS生成的：

body {
    counter-reset: pages; // initialize counter
}
 
a {
    counter-increment: pages; // increment counter
}
 
a::before {
    content: counter(pages); // display counter
}

计数属性遵循“文档出现顺序”的规则。首先遇到Body元素，初始化一个叫pages的计数器。然后遇到一个a元素就增加并显示pages计数器。

多个计数器

用不同的名字你就可以有多个计数器。这个例子有两个计数范围重叠的计数器，sections和boxes：

   Check out this Pen!

相关的CSS：

body {
        counter-reset: sections boxes;
    }
     
    section {
        counter-increment: sections;
    }
     
    section::before {
        content: 'Section ' counter(sections);
    }
     
    .box {
        counter-increment: boxes;
    }
     
    .box::before {
        content: counter(boxes, upper-roman);
    }

这里你可以看到用于立即初始化多个计数器的语法（第2行）。别致一点，boxes计数器显示为upper-roman（译者注：大写罗马数字）（第18行）。display的所有参数选项和list-style-type属性是一样的，这里是文档。

统计用户选择

现在我们做些有趣的事情。计数属性可以被置于像:checked的伪类选择器中（译者注：原文为pseudo-selectors,但一般写作pseudo-classes selectors，故照例译为伪类选择器）。这使得计数器可以通过复选框反映用户的选择。下例是统计用户选了多少项。

CSS只是少许修改前面例子中的。唯一的区别是我们在伪类选择器(input:checked)中自增并仅在专门的.total元素中显示。

body {
        counter-reset: characters;
    }
     
    input:checked {
        counter-increment: characters;
    }
     
    .total::after {
        content: counter(characters);
    }

控制自增

并非必须以1为量自增。可以按你增加任何的量。它们甚至可以负增长。以前面的例子为基础，这个例子为每个选择器设置了特殊的增量。

   Check out this Pen!

语法足够简单。

body {
        counter-reset: sum;
    }
     
    #a:checked { counter-increment: sum 64; }
    #b:checked { counter-increment: sum 16; }
    #c:checked { counter-increment: sum -32; }
    #d:checked { counter-increment: sum 128; }
    #e:checked { counter-increment: sum 4; }
    #f:checked { counter-increment: sum -8; }
     
    .sum::before {
        content: '= ' counter(sum);
    }

回到正题，你也可以控制计数器的初始值。

body {
        counter-reset: kittens 41; // starting out with 41 kittens
    }

Potential Gotcha

display:none的元素不会触发计数。如果你想隐藏一个元素但仍然触发计数，你必须用另一种方式隐藏。这是一种方式：

input {
        position: absolute;
        left: -9999px;
    }

可能你已经注意到了，这正是我在最后两个例子中所做的。为了演示效果，我隐藏了当前的复选框，但仍然需要它们被选时而计数。

结束语

太好了，浏览器支持CSS计数。普大喜奔~

CSS计数器神奇，但也别忘了我们的老朋友<ol>和<li>。在基本列表中标序它们还是不错的。CSS计数器是取巧的方式，特别是因为它们在任何元素上都起作用，让你在语法和语义上更灵活。

更新：我应该提及无障碍阅读。CSS计数依赖于伪类元素中生成的内容。某些屏幕的读者会阅读到，某些则不会。因此，那些关键的内容最好不要依赖伪类元素。尽管示例教学的CSS计数器是精心设计的，但生产环境中我不会原封不动地使用它们。