CSS 计数器（下）

摘要

技术文，不想细看可直接跳至最后的总结部分。

承接上篇《CSS 计数器（上）》，回复“20141123”、“CSS计数器”、“CSS”可查看。

上篇我们了解了 CSS 计数器的三个关键点，本篇我们来了解 CSS 计数器的用途。

计数器

既然名为“CSS 计数器”，那么最基本的应用就是计数器了。

计数器1

// css
section.characters {counter-reset: characters;}
section.characters input:checked {counter-increment: characters;}
section.total1:after {content: counter(characters);}
// 结构和样式代码就省略了，这里只写计数器相关代码，下同

效果：

什么都没选择时：
选择两个：
选择四个：

计数器2

// css
.container-2 {counter-reset: sections boxes;}

.container-2 section {counter-increment: sections;}

.container-2 section::before {content: 'Section ' counter(sections);}

.container-2 .box {counter-increment: boxes;}

.container-2 .box::before {content: counter(boxes, upper-roman);}

效果：

求和

改变每个 counter-increment 的值（默认1）可以实现求和的功能。

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

效果：