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计数器的趣味时光

时间： 2024-11-07 20:33:22

CSS计数器的趣味时光的相关文章

[ css 计数器 counter ] css中counter计数器(序列数字字符自动递增)应用问题讲解及实例演示

一.挖坟不可耻 CSS计数器不是什么新鲜玩意了,早在10年春暖花开的时候,我写的“CSS content内容生成技术以及应用”一文就要提到(见下图),不过当时是作为其中一员介绍.就像例行的溜新同事一样,虽然黑如焦炭的我在自我介绍的时候给新同事留下了深刻印象,但由于介绍的同事茫茫多,我只是其中一员.很自然,个把月之后,我就会被无情的淡忘,除了那依稀的面庞,因为毕竟长得还算比较抽象. 然而,CSS计数器的斗量显然不是短短几句介绍能够显露的,所谓人不可貌相.就像我,说不定某年某月,当年像驴子一样被溜的

CSS计数器(序列数字字符自动递增)详解———张鑫旭

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4303 一.挖坟不可耻 CSS计数器不是什么新鲜玩意了,早在10年春暖花开的时候,我写的“CSS content内容生成技术以及应用”一文就要提到(见下图),不过当时是作为其中一员介绍.就像例行的溜新同事一样,虽然黑如焦炭的我在自我介绍的时候给新同事留下了深刻印象,但由于介绍的同事茫茫多,我只是其中一员.很自然,个把月之

CSS计数器:counter

如何对元素进行计数?在早期,只有ol和ul可以对子元素li进行排序,,而CSS2.1规范中加入了counter这一新属性,配合伪元素:before.:after中的content使用,便可以对指定的元素进行排序了. CSS计数器包括了counter-reset.counter-increment.content三个属性.counter() 函数 以及伪元素:before.:after. 语法说明: counter-reset:identifier [integer] 默认值为none indet

css 计数器

早上浏览starof的::before和::after伪元素的用法时,看到提出的第四点,故着重研究了下,并对照张鑫旭前辈的demo的写了个测试例子. 首先,还是先来介绍下css计数器counter()是个什么东西,参考网址为http://www.w3cplus.com/css3/css-counters.html. CSS Counters用到的属性 使用CSS Counters给元素创建自动递增计算器不仅仅是依赖于某一个CSS属性来完成,他需要几个属性一起使用才会有效果.使用的到属性包括: *

排行榜妙用——CSS计数器

碰到的坑 小伙伴你们是否有碰到以下的情况,排行榜前3名的样式不一样,你们是怎么处理的么? 本来我也是直接每个文字,单独定样式的,感觉这样好累.赶紧搜搜有啥好方法实现,最开始想到的是ol列表,但是没办法控制样式,遂放弃,继续深入.着实让我找到了好方法——CSS计数器 CSS计数器 先看个简单的例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

CSS内容生成（重要内容：css计数器）

CSS content 属性 content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容. 该属性用于定义元素之前或之后放置的生成内容.默认地,这往往是行内内容,不过该内容创建的框类型可以用属性 display 控制. 注意: 仅在CSS可用的现代浏览器下起作用. 不可通过DOM使用,它只是纯粹的表象. content属性的值: 1.文本值,如:content:”这是添加的文字” 2.属性值,如:content:”attr(id)”//这句话将会获取元素的id属性的

css计数器 及 鼠标经过从中间扩散一个矩形（正方形长方形均可）

<!DOCTYPE html> <html> <head> <title>css计数器--兼容IE8</title> <meta charset="utf-8"/> <style type="text/css"> *{ margin:0; padding:0; } ul{ list-style: none; counter-reset: list; } li{ position: r

CSS 计数器详解

在前端开发中总少不了列表项,对于列表项序号,射鸡师一般会列出个1,2,3...序号.在不了解css计数器属性之前,我一般会用精灵图,用类名来区分序列号图片.这样做尽管可以达到目的,但是很不方便,开发过程耗时较长而且维护修改起来较困难.用css counter配合伪类的content完美的解决了这个问题,这里详细介绍下css counter属性 计数器属性介绍 计数器的值通过使用counter-reset 和 counter-increment 操作,在 content 上应用 counter()

css计数器

很多时候要是实现一行文字前面的序列号的话,可能会直接添加个新元素或者利用before伪元素实现.但如果是多行文字的序列号的话,就不是那么简单了. 恰好,css就有这么个计数器可以实现这个功能. counter-reset:进行计数器的重置. counter-increment:进行计数器的递增或递减. counter():输出计数器. 就以上三个属性.但使用起来可不是这么简单: <!DOCTYPE html> <html lang="en"> <head&