CSS计数器的趣味时光

CSS计数器是“啊太好了，竟不知道CSS能够作这啊”这类很是有趣的众多特性之一。简言之，用CSS使你持续某增长某个量，而无需JavaScript。

简单计数器

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

 

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

1 2 3 4 5 6 7 8 9 10 11

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：

 

相关的CSS：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

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 元素中显示。

1 2 3 4 5 6 7 8 9 10 11

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

控制增量

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

 

语法足够简单。

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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); }

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

1 2 3

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

Potential Gotcha

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

1 2 3 4

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

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

结束语

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

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

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

CSS计数器的趣味时光