让咱们学会使用 CSS 计数器

做者：Ahmad shaded
译者：前端小智
来源：sitepoint

点赞再看，养成习惯

本文 GitHub https://github.com/qq44924588... 上已经收录，更多往期高赞文章的分类，也整理了不少个人文档，和教程资料。欢迎Star和完善，你们面试能够参照考点复习，但愿咱们一块儿有点东西。

我看来，CSS计数器在web上尚未获得充分利用，尽管它们的支持很是好(IE8+)!。在本文中，我将解释如何在项目中使用CSS计数器，以及一些用例。

什么是CSS计数器

　　计数器是css3提供的一个强大的工具，是一种可让咱们使用CSS给元素自动编号的方法。使用它能够很方便对页面中的任意元素进行计数，实现相似于有序列表的功能。但与有序列表相比，css计数器能够对任意元素计数，同时还能够实现个性化计数。

CSS 计数器的相关属性

CSS 计数器须要三个属性，分别是：

• counter-reset
• counter-increment
• counter()

counter-reset

counter-reset：属性用于定义和初始化一个或多个CSS计数器。它能够使用一个或多个标识符做为值，该值指定计数器的名称。

使用语法：counter-reset:[<标识符><整数>?]+|none|inherit

每一个计数器名称后面均可以跟一个可选的<整数>值，该值指定计数器的初始值。

注意：

1. 关键字none，inherit和initial不能做为计数器名称；关键字none，inherit能够做为计counter-reset属性的值。设置none将取消设置计数器；设置inherit将从元素的父元素处继承counter-reset值。该counter-reset属性的默认值为none。
2. 计数器的初始值不是计数器显示时的第一个数字/值。这意味着若是但愿计数器从1开始显示，则须要将counter-reset中的初始值设置为零。0是默认的初始值，因此若是省略它，默认状况下它将重置为零；counter-reset容许使用负值。所以，若是但愿计数器从零开始显示，能够将其初始值设置为-1。

counter-increment

counter-increment属性用于指定一个或多个CSS计数器的增量值。它将一个或多个标识符做为值，指定要递增的计数器的名称。

使用语法：counter-increment:[<标识符><整数>?]+|none|inherit

每一个计数器名称（标识符）后面均可以跟一个可选<整数>值，该值指定对于咱们所编号的元素每次出现时，计数器须要递增多少。默认增量为1。容许零和负整数。若是指定了负整数，则计数器被递减。

counter-increment属性必须和counter-reset属性配合使用。

counter() 函数

counter()函数必须和content属性一块儿使用，用来显示CSS计数器。它以CSS计数器名称做为参数，并做为值传递给content属性，而content属性就会使用:before伪元素将计数器显示为生成的内容。

counters()函数也有两种形式：counters(name,string)和counters(name,string,style)。

name参数也是要显示的计数器的名称。能够使用counter-reset属性来指定计数器的名称。而counters()函数与counter()函数（单数形式）区别在于：counters()函数能够用于设置嵌套计数器。

嵌套计数器是用于为嵌套元素（如嵌套列表）提供自动编号。若是你要将计数器应用于嵌套列表，则能够对第一级项目进行编号，例如，1，2，3等。第二级列表项目将编号为1.1，1.2，1.3等。第三级项目将是1.1.1，1.1.2，1.1.3，1.2.1，1.2.2，1.2.3等。

string参数用做不一样嵌套级别的数字之间的分隔符。例如，在'1.1.2'中，点（'.'）用于分隔不一样的级别编号。若是咱们使用该counters()函数将点指定为分隔符，则它可能以下所示：

content:counters(counterName,".");

　若是但愿嵌套计数器由另外一个字符分隔，例如，若是但愿它们显示为“1-1-2”，则能够使用短划线而不是点做为字符串值：

　content:counters(counterName,"-");

和counter()函数同样，style参数是用来定义计数器的风格。默认状况下，计数器使用十进制数字格式化。具体关于style参数的设置能够参照counter()函数的style参数。

如何添加计数器

1. 为计数器选择一个名称

假设咱们有下面的 HTML:

<div class="content">
    <h2>Section</>
    <p><!-- Description --></p>

    <h2>Section</>
    <p><!-- Description --></p>

    <h2>Section</>
    <p><!-- Description --></p>
</div>

我想给每一个title元素添加一个数字。为此，我将在父元素上定义一个计数器。

.content {
    counter-reset: section;
}

你们都说简历没项目写，我就帮你们找了一个项目，还附赠【搭建教程】。

2.递增计数器

这一步对于计数器的工做很是重要。在<h2>元素上，我将建立一个before伪元素，它将用于显示计数器的值。

h2:before {
    counter-increment: section;
}

3.分配计数器

最后一步是使用counter()函数做为content属性的值。 如今，添加了如下内容：

h2:before {
    counter-increment: section;
    content: counter(section);
}

接着，为before伪元素添加一些样式，让它看起来漂亮点：

事件源码：https://codepen.io/shadeed/pe...

CSS 计数器用例

动态章节标题

根据前面的示例，咱们能够编辑before伪元素，以下所示

h2:before {
  counter-increment: section;
  content: "Section " counter(section);
  display: block;
  max-width: 80px;
  font-size: 14px;
  font-weight: normal;
  background-color: rgba(#0277bd, 0.2);
  border-radius: 20px;
  text-align: center;
  padding: 6px 8px;
  margin-bottom: 0.75rem;
}

事件源码：https://codepen.io/shadeed/pe...

嵌套计数器

假设咱们有如下列表:

<ul class="services">
    <li class="services__item">Design
      <ul>
        <li>Web</li>
        <li>Mobile</li>
        <li>Graphic</li>
      </ul>
    </li>
    <li class="services__item">Web Development</li>
    <li class="services__item">Mobile Development
      <ul>
        <li>iOS</li>
        <li>Android</li>
        <li>Windows Phone</li>
      </ul>
    </li>
</ul>

咱们想让一级显示 “1.”,二级对应“1.1” 。为此，咱们应该执行如下操做：

/* Defining a counter for the main list items */
.services {
    counter-reset: services;
}

.services__item:before {
    counter-increment: services;
    content: counter(services) ".";
}

/* Defining a counter for the sub lists */
.services__item ul {
    counter-reset: sub-services;
}

.services__item li:before {
    counter-increment: sub-services;
    content: counter(services) "." counter(sub-services);
}

事例源码：https://codepen.io/shadeed/pe...

---

原文：https://ishadeorddeed.com/art...

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

---

交流

文章每周持续更新，能够微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，整理了不少个人文档，欢迎Star和完善，你们面试能够参照考点复习，另外关注公众号，后台回复福利，便可看到福利，你懂的。