counter()php,CSS计数器(counter)入门

作为一名WEB开发者，恰当的表示信息是一项重要的工作。正恰当的显示信息一种最常见的方式是通过层次结构表示，回答“先发生什么？”这个问题。

层次可以通过对对象编号表示。在CSS中，除了有序列表

，没有其他元素允许我们增加顺序。如果我们想显示数字，我们不得不做一些预处理。 跟踪索引，确保自动递增等。类似这样：

<?php for ($i = 1; $i <= $posts->total_count; $i++): ?>

这是一个很好的点子，但它有其局限性。如果我们想使用字母，罗马数字，希腊字符等作为索引序号，都需要使用自定义的库来实现。

幸运的是，使用CSS我们可以做自动递增索引这样的事情，而不会打破原来的结构。

计数器复位和计数器递增

在我们开始使用CSS计数之前，你应该知道计数涉及两件事情：counter-reset 和 counter-increment 。

counter-reset(复位，重置)是我们重置计数器(：默认是0)或给计数器设置一个初始计数值(注：即从什么值开始计数)。而counter-increment(递增)是实际增加计数值。赶紧看看下面的HTML代码。

我们需要的是一个基本的，但简单易懂的HTML结构。在您的css文件中，我们需要定义 counter-reset 和 counter-increment。

• Minion ipsum

让我们设置

.numbered-list {

counter-reset: counter-name;

}

注意: counter-name 可以是你想要的任何东西。

接下来，我们需要设置，来增加他的值。这么做：

.numbered-list__counter {

counter-increment: counter-name;

}

通过参考上面设定的重置点，我们告诉计数器通过 counter-increment 以开始计数。

由于计数器增加产生的内容很像 :before 和 :after, 我们可以使用 :before 和 :after 的 content 属性来插入计数器。此外，counter CSS函数允许我们完善(自定义)计数器的值(注：如果想重复多次计数器可以使用 counters() 函数)。

.numbered-list__counter:before {

counter-increment: counter-name;

content: counter(counter-name);

}

注意：我省掉了一些内容样式，以保持我们的CSS最简化。

偏移增量索引

counter-increment 也可以取正值或负值以改变增量值的步数。

counter-increment: counter-name 2;

/* counter-increment: counter-name +2; */

上面的将以2倍数增加增量值。

要反向增量，可以使用负值，将以所提供的索引倍数值减少。

counter-increment: counter-name -2;

改变计数器初始值(开始点)

在 counter-reset声明之后传递一个整数，告诉浏览器更改初始值的偏移量。

.numbered-list {

counter-reset: counter-name 2;

}

您还应该知道计数器复位值默认为0。将这个值设置为2，计数器以3开始计数，就像这样：

倒序计数器

倒序计数器会涉及到在 counter-increment 上使用负值索引。如果列表是动态生成的，这也可能造成很棘手的问题。用户必须找到一种方法来追踪索引。

就我个人而言，看到别人都是这样做的：

<?php for ($i = 1; $i <= $posts->total_count; $i++): ?>

将 counter-reset 样式设置为内联样式，使用php以生成 counter-reset 的值。在css文件中，我们可以将 counter-increment 设置为负值。

使用其他格式

除了用数字递增计数器之外，我们也可以使用字母(alphabets)，希腊字符(greek characters)，罗马数字(roman numerals)等。

如果你是罗马数字的粉丝(像我一样)，然后使用罗马数字 – 所有你需要做的只是传递第二个参数(lower-roman)给 counter css函数就可以了。

content: counter(counter-name, lower-roman);

其他选项包括 decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha。

CSS counter的浏览器支持情况

就像大家说的“一张图片胜过千言万语”。CanIUse的这个图表说明了CSS计数器的支持的支持情况。它们在Internet Explorer和Safari中得到很好的支持，别的就更不用说了。所以你不需要担心使用CSS计数器的兼容性问题，他们有大量的浏览器支持。

就个人而言，我觉得CSS计数器很酷。对一些人来说，使用CSS计数器的好处是不言而喻的，因为它们可以不占任何代码结构和编程方法，推荐大家使用它。

计数器的高级使用

这里介绍几个CSS计数器实用的应用场景，

自定义 CSS counter(计数器)内容

content属性中，counter CSS函数可以和其他字符串连接来自定义计数器的内容，例如：

CSS counter(计数器)嵌套

CSS计数器对创建有序列表特别有用，因为在子元素中会自动创建一个CSS计数器的实例。使用 counters() 函数，在不同级别的嵌套计数器之间可以插入字符串。比如这个CSS例子：