建议 Web 开发者掌握的 CSS 计数器用法

栏目: IT技术 · 发布时间: 4年前

内容简介:前言

建议 Web 开发者掌握的 CSS 计数器用法

前言

CSS 里面的伪元素其实是非常好用的,但是经常容易被大家忽略。伪元素里面常用到的 content 属性,可能现在很多人仅仅以为它的值只支持字符串,其实除了字符串外常用到的还有 uri counter  。今天要介绍的就是 conter(计数器)。

先看如下的例子:

建议 Web 开发者掌握的 CSS 计数器用法
<div>
  <h3>桃翁</h3>
  <h3>介绍</h3>
  <h3>css 计数器</h3>
</div>

根据如上的 HTML 你是否有办法不通过 JavaScript ,仅仅用 CSS 在 title 前面增加 Title number: 呢?

CSS 计数器基本概念

如果仅仅增加一个 Title ,大家都知道通过伪元素(:before 或者:after),设置 content 为 Title,但是如何自动根据 h3 出现的顺序来展示自动编号可能很多人就不知道了。

自动编号在 CSS 2.1 中是通过两个属性控制的, 'counter-increment' [1]  和  'counter-reset' [2] 。通过这些属性定义的计数器用于 'content’ [3]  属性的 counter() 和 counters() 函数。

初始化计数器

在使用计数器的时候需要先初始化这个计数器,并且设置一个计数器的名字(变量)。下面是例子,title 就是名字,conter-reset 就是用来初始化的,这个属性是必须设置的,否则没办法用计数器。

'counter-reset' [4]  属性也含有一列一个或多个计数器,每个后面可以跟一个可选的整数。该整数给定了每次出现该元素时给计数器设置的值,默认为 0。

counter-reset: 计数器名称[, 默认值number];           /* 重置计数器成0 */

计数器自增

有了一个计数器的变量后,可以让这个变量进行自增。

'counter-increment' [5]  性接受一个或多个计数器名(标识符),每个后面都可以跟一个可选的整数。这个整数表示每次出现该元素时计数器递增几。默认增量是 1,可以接受 0 和负数。

counter-increment: 计数器名称[, 增量];      /* 增加计数器值 */

显示计数器

最后就是现实计数器的值,获取计数器的值有两个函数:counter() 和 counters() ,如上面的例子:

content: counter(计数器名称[, 显示的风格]) /* 显示计数器 */

或者:

counters(计数器名称, 嵌套时拼接字符串[, 可选的显示风格])

基本使用

学完了基本概念,就可以解决上面的问题了。按照步骤来,三步:

  1. 初始化计时器

div {
  counter-reset: title;           /* 重置计数器成0 */
}
  1. 计数器自增

h3:before {
  counter-increment: title;      /* 增加计数器值 */
}
  1. 显示计数器

h3:before {
  content: "Title " counter(title) ": "; /* 显示计数器 */
}

合起来的解决方案如下:

div {
  counter-reset: title;           /* 重置计数器成0 */
}
h3:before {
  counter-increment: title;      /* 增加计数器值 */
  content: "Title " counter(title) ": "; /* 显示计数器 */
}

高级用法

嵌套计数器与作用域

计数器是“自嵌套的(self-nesting)”,如果重置一个位于后代元素或者伪元素中的计数器,会自动创建一个新的计数器实例。这对 HTML 中的列表之类的场景来说很重要。在这种场景下,元素自身可以嵌套任意深度,不用为每一层定义唯一命名的计数器。

计数器的作用域从文档中具有  'counter-reset' [6]  该计数器的第一个元素开始,包括该元素的后代、后续兄弟及其后代。

官方套话比较难懂,用大白话说就是设置了 counter-reset ,那么这个元素的子元素都属于这个作用域下。

想要完全理解作用域,就得把下面这个图看懂:

建议 Web 开发者掌握的 CSS 计数器用法

上面的这个 HTML 代码,再加上这段 CSS 代码:

OL { counter-reset: item }
LI { display: block }
LI:before {
  counter-increment: item
}

OL 将会创建一个计数器,并且 OL 的所有子级将引用该计数器。如果我们用 item[n] 表示 "item" 计数器的第 n 个实例,用 "{"和"}" 表示一个作用域的开始和结束,那么上面 HTML 片段将使用标注的计数器。

注意看 2.3.1 的两个元素,由于他们都在 2.3 下面,有两个同名的计数器,那么这两个同名计数器会分别创建实例,所有会得到两个 2.3.1。

如果懂了作用域的关系,接下来就可以通 counter() 或者 counters() 函数进行展示。

counter

Counter 显示代码如下:

OL { counter-reset: item }
LI { display: block }
LI:before {
  content: counter(item) ". ";
  counter-increment: item
}

效果如下:

建议 Web 开发者掌握的 CSS 计数器用法

可以看到 counter 只会显示当前作用域下计数器的值,如果要生成嵌套作用域的计数器就得用 counters 函数。

counters

OL { counter-reset: item }
LI { display: block }
LI:before {
  content: counters(item, '.') " ";
  counter-increment: item;
}

建议 Web 开发者掌握的 CSS 计数器用法

更换格式

在显示计数器部分 counter 和 counters 都有一个可选参数,显示风格,这个显示风格跟 list-style-type [7] 一样的。比如我们将文章开头的例子拿来举例,默认是 decimal 风格,比如换成字母(type 是 lower-latin)形式,CSS 如下:

div {
  counter-reset: title;           /* 重置计数器成0 */
}
h3:before {
  counter-increment: title;      /* 增加计数器值 */
  content: "Title " counter(title, lower-latin) ": "; /* 显示计数器 */
}

效果如下,list-style-type 有很多种,甚至还有中文(list-style-type 是 cjk-ideographic)的。

建议 Web 开发者掌握的 CSS 计数器用法

自定义起始值

起始值设置为 5。

div {
  counter-reset: title 5;           /*起始值订为 5 */
}
h3:before {
  counter-increment: title;
  content: "Title " counter(title) ": ";
}

建议 Web 开发者掌握的 CSS 计数器用法

自定义每次递增的值

每次递增的值设置为 2。

div {
  counter-reset: title 5;
}
h3:before {
  counter-increment: title 2;      /* 每次递增的值为 2 */
  content: "Title " counter(title) ": ";
}

建议 Web 开发者掌握的 CSS 计数器用法

使用场景

场景 1:嵌套列表

比如要生成一个文章的大纲:

建议 Web 开发者掌握的 CSS 计数器用法

场景 2:计算已经勾选的复选框

使用输入框的 :checked 伪类,我们可以检查复选框是否被选中,选中的话,我们计数器的数值就会增加。

下面的这个 2 种菜系直接就是可以通过计数器来实现的,不需要使用 js。

建议 Web 开发者掌握的 CSS 计数器用法

场景 3:自动追踪文档条目

当你需要处理一些重复元素,并且你同样想统计他们的数量,那么这个方案会很好用。

建议 Web 开发者掌握的 CSS 计数器用法

参考资料

[1] 'counter-increment': http://www.ayqy.net/doc/css2-1/generate.html#propdef-counter-increment

[2] 'counter-reset': http://www.ayqy.net/doc/css2-1/generate.html#propdef-counter-reset

[3] 'content’: http://www.ayqy.net/doc/css2-1/generate.html#propdef-content

[4] 'counter-reset': http://www.ayqy.net/doc/css2-1/generate.html#propdef-counter-reset

[5] 'counter-increment': http://www.ayqy.net/doc/css2-1/generate.html#propdef-counter-increment

[6] 'counter-reset': http://www.ayqy.net/doc/css2-1/generate.html#propdef-counter-reset

[7] list-style-type: https://www.w3school.com.cn/cssref/pr_list-style-type.asp

css计数器详解:https://www.cnblogs.com/liuxianan/p/css-counters.html

Happy coding!

推荐阅读:

PWA 入门与实践

[fCC 100] 祝贺 freeCodeCamp 全球社区 2019 Top Contributors

这才是真正的 Git——Git 内部原理揭秘!

建议 Web 开发者掌握的 CSS 计数器用法

:heart:爱心三连击

1.看到这里了就点个在看支持下吧,你的 「在看」 是我创作的动力。

2.关注公众号 达达前端「每天为您分享原创或精选文章」

3.特殊阶段,带好口罩,做好个人防护。

4.添加微信【xiaoda0423】,拉你进 技术交流群 一起学习

扫码关注公众号,订阅更多精彩内容。

建议 Web 开发者掌握的 CSS 计数器用法


以上所述就是小编给大家介绍的《建议 Web 开发者掌握的 CSS 计数器用法》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

自媒体写作,从基本功到实战方法

自媒体写作,从基本功到实战方法

余老诗 / 清华大学出版社 / 2018-9-1 / 59.00元

《自媒体写作》是一本系统而通俗易懂的自媒体写作指导书。 全书共分为10章,分别从写作基本功、新媒体认知、新媒体传播规律和自媒体作者阅读写作素养以及如何进阶等方面展开,结合简书、公众号、今日头条等主流自媒体所选例文,讲解写作知识和新媒体特点,内容详实,有理有据,非常适合自媒体写作爱好者自学。 尤其值得一提的是,写作基本功部分从原理、方法和技巧三个层面展开论说,让自媒体写作学习者既能从根本......一起来看看 《自媒体写作,从基本功到实战方法》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具