开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第1 天，点击查看活动详情
大家好，这是我入坑以来的第二篇文章。每天混迹于各种论坛网站沸点而渐渐觉得乏味，为了充实自己也为了年前的flag,慢慢积累，冲~
年年岁岁花相似，岁岁年年人不同。朋友渐渐没了联络，bug却一直守候在我们身边，只有它最真心了。 当我在年前遗留的各种问题中渐渐失去耐心时突然眼前一亮，屎山里的一颗璀璨的明珠跳了出来。 喏，就是下面这位：
作为切图仔，Javascript可以不自信，但是样式上的问题从来是不露怯的。这突如其来的陌生感难免让我有些尴尬，仔细研究观察原来这是计数器。下图中的代表步骤的数字就是它生成的。
按照通常的思维，步骤不多直接<span>1 2 3</span>直截了当，但是步骤多了就很尴尬（不考虑js）。所以counter(step)虽不常见，但是很有必要。
下面我们一起来观察它是如何实现的。
<div class="step">
<span>打开冰箱</span>
<span>把大象塞进冰箱</span>
<span>关上冰箱</span>
</div>
<style>
.step{display: flex;margin-top:10px;counter-reset: step;}
.step span{margin:0 20px;padding:20px 0;flex:1;border:1px solid #ccc;text-align: center;}
.step span::before{content:counter(step);counter-increment: step;}
</style>
上面的html浅显易懂就不多赘述。通过样式我们可以发现父类的counter-reset: step;伪类的content:counter(step);counter-increment: step;这几个是我们今天研究的主要对象。
counter-reset
counter-reset属性创建或重置一个或多个计数器，默认值为0；通常是和counter-increment属性，content属性一起使用。利用这个属性，计数器可以设置或重置为任何值，可以是正值或负值。如果没有提供 number，则默认为 0。
counter-increment
counter-increment属性递增一个或多个计数器值，默认增量是 1。利用这个属性，计数器可以递增（或递减）某个值，这可以是正值或负值。如果没有提供 number 值，则默认为 1。
content
content 属性与 :before 及 :after 伪元素配合使用，来插入内容。默认值normal
语法格式：
content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;
以下是多段落的实现方法，和上图“把大象关进冰箱”一样的实现方法。
悄悄地说一声加油！
