CSS 计数器简介

作者 : 开心源码 本文共2530个字,预计阅读时间需要7分钟 发布时间: 2022-05-11 共146人阅读

内容导读

接下来我们用计数器来为这个列表前面加上序号,使它呈现为下面这个样子。第二个为整数,能为负值,默认值为0.一般情况下我们把它定义在它的父元素上。很简单吧,接下来就是第三步,应使用我们指定好的计数器。一般来说,计数器常使用于自动生成列表项的递增规则,所以经常在伪类元素的 content 属性中用它,同样,我们需要一个 counter() 函数的帮助来将相应计数器注入 content 属性中,我们把计数器的名称传入到此函数能完成应使用。在以上规则中,列表的子项会呈现为‘1-1, 1-2, 1-3’这样的形式。你能看张鑫旭大神的 这篇 查看更详细生动的详情。

CSS 计数器(counter)是由 CSS 维护的变量,其主要使用途是,能通过指定的规则来计算节点元素的用次数。

计数器的用很简单,分为以下三步:

  1. 初始化计数器

  2. 指定增量规则

  3. 应使用计数器

这三步分别对应这计数器的三个属性和方法:

  1. counter-reset

  2. counter-increment

  3. counter()/counters()

下面用一个例子,来熟习这些规则。

首先,我们拥有一个如下的列表。

<ul> <li>第一项</li> <li>第二项</li> <li>第三项</li></ul>

接下来我们用计数器来为这个列表前面加上序号,使它呈现为下面这个样子。

CSS 计数器简介

counter example

很简单,如前面所述,三步走:

第一步,初始化计数器。我们用 counter-reset 操作,这个属性能接受两个值为一组的多组属性值,第一个值,我们为计数器起个名字,第二个值,我们指定该计数器的初始值。

counter-reset: custom-name integer;

第一个计数器的名称必需由字母、数字、下划线、中划线组成,且第一个字符必需为字母。第二个为整数,能为负值,默认值为0.一般情况下我们把它定义在它的父元素上。

此属性能指定多组,代表多个计数器,例如:

counter-reset: counter1 counter2 1 counter3 -2;

上面的规则定义了三个计数器,第一个名称为 counter1 初始值为 0,第二个 counter2 初始值为1,第三个counter3 初始值为 -2。

所以回到上面的例子,我们的列表要从1开始,所以,我们能如下定义:

ul { counter-reset: items 0; /* 0 能省略 */}

初始化之后,第二步,指定计数器增量规则。我们用 counter-increment 来实现这个目的,这个属性的值和前面的 counter-reset 十分相似,同样是由两个值组成的多组值,第一个值同样是由 counter-reset 初始化好的计数器名称,第二个值为该计数器的增量,默认值为 1.

counter-increment: counter-name integer;

举例,针对上面的三个计数器,我们分别为它们指定不同的增量规则:

counter-increment: counter1 counter2 -1 counter3 2

我们为 counter1 没有指定增量,所以它会按照默认值 1 递增,counter2 按 1 递减,counter3 按 2 递增。

再次回到我们的例子,我们为已经初始化好的 items 计数器指定以 1 递增的增量规则:

li { counter-increment: items 1; /* 1 同样能省略 */}

很简单吧,接下来就是第三步,应使用我们指定好的计数器。一般来说,计数器常使用于自动生成列表项的递增规则,所以经常在伪类元素的 content 属性中用它,同样,我们需要一个 counter() 函数的帮助来将相应计数器注入 content 属性中,我们把计数器的名称传入到此函数能完成应使用。并且能定制更个性化的计数规则。直接上例子:

li:before { content: counter(items) '. ';}

这样,我们就为三个列表项前面增加了‘1. 2. 3.’的计数规则。另外,counter() 方法能指定第二个参数,来束缚计数器的显示规则,例如指定为 lower-roman,则它会按照小写罗马数字的形式递增:ⅰⅱⅲⅳ···,至于这个值能取什么值,其实就是 list-style-type` 能取的值它都能。

需要注意的是,除了初始化操作,其它两项操作必需要指定在相应的列表项上才可以生效。

计数器嵌套

计数器特别强大的一点是,在一个嵌套的列表项,它会为内层的子元素自动增加计数器,我们能在用计数器的时候,应使用 counters() 函数的第二个参数来指定子项的连接符。例如:

content: counters(counter-name, '-');

在以上规则中,列表的子项会呈现为‘1-1, 1-2, 1-3’这样的形式。上例子:

<!-- html --><ul> <li> <ul> <li></li> </ul> </li> <li> <ul> <li></li> <li></li> <li></li> </ul> </li> <li> <ul> <li></li> <li></li> </ul> </li></ul><!-- css -->ul { counter-reset: content; list-style-type: none;}ul li:before { counter-increment: content; content: counters(content, "-") ". ";}

它呈现出来的效果如下图:

CSS 计数器简介

counter 嵌套

以上就是对 CSS 计数器的简单详情。你能看张鑫旭大神的这篇查看更详细生动的详情。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » CSS 计数器简介

发表回复