带你了解css计数器——counters

fuyi501 发布于2019-08-30 15:53 / 2828人阅读

摘要：语法格式，中的是和中元素所支持的的值，也就是你可以将显示为罗马数字则是表示可以使用指定的字符串将计数器连接起来。

第一次了解到这个css是因为代码高亮-prismj中行号显示的实现。

当时很好奇前面的行号是如何实现的，一探究竟原来非常简单。

话不多说，先看代码。

一段css代码经过替换后的HTML：

pre.line-numbers {
    position: relative;
    padding-left: 3.8em;
    counter-reset: linenumber;
}

生成的html无非就是把不同的关键字用不同的span括起来，加上不同的样式，从而显示出不同的颜色，达到代码高亮的效果。我们重点关注其行号是如何实现的，相关css代码如下：

pre.line-numbers {
  position: relative;
  padding-left: 3.8em;
  counter-reset: linenumber;
}
.line-numbers .line-numbers-rows {
  font-size: 100%;
  position: absolute;
  top: 0;
  left: -3.8em;
  width: 3em;
  user-select: none;
  letter-spacing: -1px;
  pointer-events: none;
  border-right: 1px solid #999;
}
.line-numbers-rows>span {
  display: block;
  counter-increment: linenumber;
}
.line-numbers-rows>span:before {
  display: block;
  padding-right: .8em;
  content: counter(linenumber);
  text-align: right;
  color: #999;
}

就能显示为如上所示的结构，css代码看起来多，实则不然，核心部分就三句：

遇到 line-numbers 时 counter-reset: linenumber; 作用是重置名称为linenumber的计数器。

遇到 .line-numbers-rows>span 时 counter-increment: linenumber; 作用是此时名称为linenumber的计数器进行递增。

在 line-numbers-rows>span 中创建一个伪元素，设置其content 为 counter(linenumber) ，也就是在这个伪元素中显示这个计数器

codepen 实例

既然不知道，就还是来学习一下，一查才知道，这东西已经出现很多年了，不是什么新鲜玩意。还是自己无知呀，学无止境。

css-counter的几个关键属性正好就是上面实现行号所用到的三部曲。

counter-reset ：必需值，必须用于选择器，主要用来标识该作用域，其值可以自定义。值语法为 counter-reset: identifier [integer ] ，其中的 identifier 即为计数器的名称，第二值 integer 为计数器的初始值，默认为0，可接受任意整数值，默认为0，可省略。另外还可以一次定义多个,如 counter-reset: counter1 -10 counter1 10。

counter-increment ：作用是遇到这个选择器匹配的元素时，计数器进行递增。语法格式为 counter-increment:identifier [integer]，identifier 为计时器名称，integer为一个整数值，表示每次递增的值（负数则为递减），默认为1，可省略。

counter()/counters() : 这个实际是个方法，可理解为获取计数器的值。通常将其作为伪元素的 content 属性，从而将值显示出来。语法格式 counter(name, style) / counters(name, string) ，counter 中的 style 是ul和ol中li元素所支持的list-style-type 的值，也就是你可以将 1 显示为罗马数字 i ；counters 则是表示可以使用指定的字符串将计数器连接起来。

我们实现一个最简单的例子吧，给ul列表加上序号。


  列表条目1
  列表条目2
  列表条目3
  列表条目4
  列表条目5

效果如图：

挺简单嘛，论文或者各种文档中需要将标题标为1-1、1-1-1的形式是不是也可以用这个做呢，我们一起来试试。

效果果如图：

能实现，但是略显麻烦对不对。对于这种需要嵌套的使用 counters 就会变得方便很多。

效果：

一样的效果代码是不是简单了不少呢？

云服务器超融合服务器 counters counter 带你学c带你飞带你搭建阿里云服务器系统

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116657.html

使用 CSS 计数器

摘要：使用计数器计数器本质上是维护的变量，这些变量可以根据规则增加以跟踪使用次数。有网友利用计数器制作文档的列表序号排序，也有网友利用计数器伪类元素制作更华丽的效果。使用计数器语法命名变量并定义计数器的值，默认为。注意计数器只跟属性使用才有效。使用 CSS 计数器 CSS 计数器本质上是 CSS 维护的变量，这些变量可以根据 CSS 规则增加以跟踪使用次数。那么关于 CSS 计数器的使用...

guqiu 2019-08-30 14:14 评论0 收藏0
CSS伪元素（content与counter）

摘要：前面介绍过里的和这两个伪元素，以及相关的用法，这篇将针对搭配计数器进行一些有趣的应用，相信熟练之后搞不好很好玩也说不定。使用语法计数器名称，分隔字，了解原理之后，透过和的交互应用，就可以做出颇具特色的列表效果。前面介绍过CSS里的::before和::after这两个伪元素，以及content相关的用法，这篇将针对content搭配counter（计数器）进行一些有趣的应用，相信熟练...

wangzy2019 2019-08-02 16:13 评论0 收藏0
CSS伪元素（content与counter）

摘要：前面介绍过里的和这两个伪元素，以及相关的用法，这篇将针对搭配计数器进行一些有趣的应用，相信熟练之后搞不好很好玩也说不定。使用语法计数器名称，分隔字，了解原理之后，透过和的交互应用，就可以做出颇具特色的列表效果。前面介绍过CSS里的::before和::after这两个伪元素，以及content相关的用法，这篇将针对content搭配counter（计数器）进行一些有趣的应用，相信熟练...

NervosNetwork 2019-08-29 18:39 评论0 收藏0
搞懂闭包

摘要：此时闭包函数的作用域链得以保存，不会被垃圾回收机制所回收。执行执行完毕，返回总结闭包的原理，就是把闭包函数的作用域链保存了下来。原文：搞懂闭包 | AlloyTeam作者：TAT.yaoyao 闭包这个概念是前端工程师必须要深刻理解的，但是网上确实有一些文章会让初学者觉得晦涩难懂，而且闭包的文章描述不一。本文面向初级的程序员，聊一聊我对闭包的理解。当然如果你看到闭包联想不到作用域链...

masturbator 2019-08-26 10:14 评论0 收藏0
css系列之before或after中content

摘要：要配合和属性使用。，给同级元素增加计数器用于标识自增计数器的作用范围，为自定义名称，为起始编号默认为。 **单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素，不过浏览器需要同时支持旧的已经存在的伪元素写法，比如:first-line、:first-letter、:before、:after等，单冒号(:)兼容性更好** content可能的值 div::after{ ...

lieeps 2019-08-30 15:55 评论0 收藏0