关于前端:强大的css计数器

弱小的 css 计数器

css content 属性有很多实用的用法，这其中最为弱小的莫过于是计数器了，它甚至能够实现连 javascript 都不可能实现的成果，上面咱们一起来钻研一下吧。

css 计数器次要有 3 个关键点须要把握。如下:

1. 首先须要一个计数器的名字，这个名字由使用者本人定义。
2. 计数器有一个计数规定，比方是 1,2,3,4… 这样的递增形式，还是 1,2,1,2… 这样的间断递增形式。
3. 计数器的应用，即定义好了一个计数器名字和计数规定，咱们就须要去应用它。

以上 3 个关键点别离对应的就是 css 计数器的 counter-reset 属性,counter-increment 属性，和 counter()/counters() 办法。上面咱们顺次来介绍这三个玩意儿。

counter-reset 属性

counter-reset 属性叫做计数器重置，对应的就是创立一个计数器名字，如果能够，顺便也能够通知计数器的计数起始值, 也就是从哪个值开始计数，默认值是 0, 留神是 0, 而不是 1。例如以下一个示例:

html 代码如下:

<p> 开始计数，计数器名叫 counter</p>
<p class="counter"></p>

css 代码如下:

.counter {counter-reset: counter;}

.counter::before {content: counter(counter);
}

在浏览器中运行以上示例，你会看到如下图所示:

能够看到计数器的初始值就是 0, 当初咱们批改一下 css 代码，如下所示:

.counter {counter-reset: counter 1;}

在浏览器中运行以上示例，你会看到如下图所示:

这次咱们指定了计数器的初始值 1，所以后果就是 1，计数器的初始值同样也能够指定成小数，正数，如 -2,2.99 之类，只不过 IE 和 FireFox 浏览器都会认为是不非法的数值，当做默认值 0 来解决，谷歌浏览器也会间接显示正数，如下图所示:

低版本谷歌浏览器解决小数的时候是向下取整，比方 2.99 则显示 2, 最新版本则当成默认值 0, 来解决，如下图所示:

ps: 当然不举荐指定初始值为正数或者小数。

你认为到这里就完了吗？还没有，计数器还能够指定多个，每一个计数器之间用空格隔开，比方以下代码:

.counter {counter-reset: counter1 1 counter2 2;}

.counter::before {content: counter(counter1) counter(counter2);
}

在浏览器中运行以上示例，你会看到如下图所示:

除此之外，计数器名还能够指定为 none 和 inherit，也就是勾销计数和继承计数器，这没什么好说的。

counter-increment

顾名思义，该属性就是计数器递增的意思，也就是定义计数器的计数规定，值为计数器的名字，能够是一个或者多个，并且也能够指定一个数字，示意计数器每次变动的数字，如果不指定，默认就依照 1 来变动。比方以下代码:

.counter {
  counter-reset: counter 1;
  counter-increment: counter;
}

失去的后果就是: 1 + 1 = 2。如下图所示:

再比方以下代码:

.counter {
  counter-reset: counter 2;
  counter-increment: counter 3;
}

失去的后果就是：2 + 3 = 5，如下图所示:

由此可见，计数器的规定就是: 计数器名字惟一，每指定一次计数规定，计数器就会加一，每指定二次计数规定，计数器就会加二，……以此类推。

计数规定不仅能够创立在元素上，也能够创立在应用计数器的元素上，比方以下代码:

.counter {
  counter-reset: counter;
  counter-increment: counter;
}

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

咱们不仅在类名为 counter 元素上创立了一个计数器规定，同样的也在 before 伪元素上创立了一个计数器规定，因而最初的后果就是: 0 + 1 + 1 = 2。如下图所示:

总而言之，无论地位在何处，只有有 counter-increment，对应的计数器的值就会变动，counter() 只是输入而已! 计数器的数值变动遵循 HTML 渲染程序，遇到一个 increment 计数器就变动，什么时候 counter 输入就输入此时的计数值。

除此之外，计数器规定也能够和计数器一样，创立多个计数规定，也是以空格辨别，比方以下示例代码:

.counter {
  counter-reset: counter1 1 counter2 2;
  counter-increment: counter1 2 counter2 3;
}

.counter::before {content: counter(counter1) counter(counter2);
  counter-increment: counter1 4 counter2 5;
}

此时的后果就应该是计数器 1: 1 + 2 + 4 = 7, 计数器 2: 2 + 3 + 5 = 10。如下图所示:

同样的，计数器规定的值也能够是正数，也就是递加成果了，比方以下代码:

.counter {
  counter-reset: counter1 1 counter2 2;
  counter-increment: counter1 -1 counter2 -3;
}

.counter::before {content: counter(counter1) counter(counter2);
  counter-increment: counter1 2 counter2 5;
}

此时的后果就应该是计数器 1: 1 – 1 + 2 = 2, 计数器 2: 2 – 3 + 5 = 4。如下图所示:

同样的计数规定的值也能够是 none 或者 inherit。

counter

counter 办法相似于 calc，次要用于定义计数器的显示输入，到目前为止，咱们后面的示例都是最简略的输入，也就是如下语法:

counter(name); /* name 为计数器名 */

实际上还有如下的语法:

counter(name,style);

style 参数和 list-style-type 的值一样，意思就是不仅能够显示数字，还能够显示罗马数字，中文字符，英文字母等等，值如下:

list-style-type: disc | circle | square | decimal | lower-roman | upper-roman |
  lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian |
  lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha |
  lower-latin | upper-latin | simp-chinese-informal;

比方以下的示例代码:

.counter {
  counter-reset: counter;
  counter-increment: counter;
}

.counter::before {content: counter(counter, lower-roman);
}

后果如下图所示:

再比方以下的示例代码:

.counter {
  counter-reset: counter;
  counter-increment: counter;
}

.counter::before {content: counter(counter, simp-chinese-informal);
}

后果如下图所示:

同样的 counter 也能够反对级联，也就是说，一个 content 属性值能够有多个 counter 办法，如:

.counter {
  counter-reset: counter;
  counter-increment: counter;
}

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

后果如下图所示:

counters

counters 办法尽管只是比 counter 多了一个 s 字母，然而含意可不一样，counters 就是用来嵌套计数器的，什么意思了？咱们平时如果显示列表符号，不可能只是单单显示 1,2,3,4… 还有可能显示 1.1,1.2,1.3… 前者是 counter 做的事件，后者就是 counters 干的事件。

counters 的语法为:

counters(name, string);

name 就是计数器名字，而第二个参数 string 就是分隔字符串，比方以 ’.’ 分隔，那 string 的值就是 ’.’，以 ’-‘ 分隔，那 string 的值就是 ’-‘。来看如下一个示例:

html 代码如下:

<div class="reset">
  <div class="counter">
    javascript 框架
    <div class="reset">
      <div class="counter">&nbsp;angular</div>
      <div class="counter">&nbsp;react</div>
      <div class="counter">
        vue
        <div class="reset">
          <div class="counter">
            vue 语法糖
            <div class="reset">
              <div class="counter">&nbsp;@</div>
              <div class="counter">&nbsp;v-</div>
              <div class="counter">&nbsp;:</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

css 代码如下:

.reset {
  counter-reset: counter;
  padding-left: 20px;
}

.counter::before {content: counters(counter, '-') '.';
  counter-increment: counter;
}

后果如下图所示:

这种计数成果在模仿书籍的目录成果时十分实用，比方写文档，会有嵌套题目的状况，还有一个比拟重要的点须要阐明一下，就是显示 content 计数值的那个 DOM 元素在文档流中的地位肯定要在 counter-increment 元素的前面，否则是没有计数成果的。

总而言之，content 计数器是十分弱小的，以上都只是很根底的用法，真正把握还须要大量的实际以及灵感还有创意。