CSS计数器counter的使用技巧

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

这篇文章主要介绍“CSS计数器counter的使用技巧”，在日常操作中，相信很多人在CSS计数器counter的使用技巧问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS计数器counter的使用技巧”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

初始化CSS计数器

为了好理解，我们使用<OL> 和 <LI> 元素来做演示。首先我们要重置计数器，让它归零，并给它指定一个名称：

CSS Code复制内容到剪贴板

这个计数器叫slideNum，下面的例子都都要使用它。

CSS计数器的自增

为了是计数器能够自增，我们需要使用counter-increment，并把计数器的名称跟到后面：

CSS Code复制内容到剪贴板

这样，在CSS选择器下，每遇到一个符合条件li元素，counter-increment就会被调用一次，计数就是增加1。需要注意的是，这里的CSS选择器里使用了>符号，这样是为了滤掉有可能多重嵌套的li元素。否者你的计数值就会不是你想要的。

使用计数值

如果只计数而无法显示，那这个计数器也没多大用处，所以就有了counter()命令来输出计数器里的值，可以用在content属性里：

CSS Code复制内容到剪贴板

有趣的是，这个counter()命令还可以接受第二个参数，当作同时计算多个元素时数据的分隔符：

假设有这样的HTML:

XML/HTML Code复制内容到剪贴板

我们这样来写：

CSS Code复制内容到剪贴板

会输出下面的结果

XML/HTML Code复制内容到剪贴板

你可以发现，当需要显示这种联级嵌套序号时，这种技术是非常的有用的。很像微软WORD里面文档的多重序号。

在 counter-reset 属性中，定义了一个随机 ID，其默认值是0。你可以在 counter-increment 属性中定义另外一个数字，作为计数的步长。

例如：counter-increment: i 2 将值显示偶数。

大多时候，CSS计数器都是配合:after和:before伪元素使用，我曾看到过有人在幻灯片、视频页面和文档里用过CSS计数器。相信你会找到其它可以使用它的地方。

CSS 计数器进阶
利用 CSS 计数器，能统计被用户选择的复选框个数：

CSS Code复制内容到剪贴板

<div class="languages">
<input id="c" type="checkbox"><label for="c">C</label>
<input id="C++" type="checkbox"><label for="C++">C++</label>
<input id="C#" type="checkbox"><label for="C#">C#</label>
<input id="Java" type="checkbox"><label for="Java">Java</label>
<input id="JavaScript" type="checkbox"><label for="JavaScript">JavaScript</label>
<input id="PHP" type="checkbox"><label for="PHP">PHP</label>
<input id="Python" type="checkbox"><label for="Python">Python</label>
<input id="Ruby" type="checkbox"><label for="Ruby">Ruby</label>
</div>
<p class="total">
Total selected:
</p>
.languages {
countercounter-reset: characters;
}
input:checked {
countercounter-increment: characters;
}
.total:after {
content: counter(characters);
}