作为一名WEB开发者,恰当的表示信息是一项重要的工作。正恰当的显示信息一种最常见的方式是通过层次结构表示,回答“先发生什么?”这个问题。
层次可以通过对对象编号表示。在CSS中,除了有序列表<ol></ol>
,没有其他元素允许我们增加顺序。如果我们想显示数字,我们不得不做一些预处理。 跟踪索引,确保自动递增等。类似这样:
<ul class="numbered-list"> <?php for ($i = 1; $i <= $posts->total_count; $i++): ?> <li class="numbered-list__item"> <span class="numbered-list__counter"> <?php echo $i ?> </span> <!-- Remaining markup --> </li> <?php endfor ?> </ul>
这是一个很好的点子,但它有其局限性。如果我们想使用字母,罗马数字,希腊字符等作为索引序号,都需要使用自定义的库来实现。
幸运的是,使用CSS我们可以做自动递增索引这样的事情,而不会打破原来的结构。
计数器复位和计数器递增
在我们开始使用CSS计数之前,你应该知道计数涉及两件事情:counter-reset
和 counter-increment
。
counter-reset
(复位,重置)是我们重置计数器(:默认是0)或给计数器设置一个初始计数值(注:即从什么值开始计数)。而counter-increment
(递增)是实际增加计数值。赶紧看看下面的HTML代码。
我们需要的是一个基本的,但简单易懂的HTML结构。在您的css文件中,我们需要定义 counter-reset
和 counter-increment
。
<ul class="numbered-list"> <li class="numbered-list__item"> <span class="numbered-list__counter"></span> <span class="numbered-list__text">Minion ipsum</span> </li> </ul>
让我们设置<ul class="numbered-list"></ul>
作为计数列表的重置点,这个很简单:
.numbered-list { counter-reset: counter-name; }
注意: counter-name
可以是你想要的任何东西。
接下来,我们需要设置<span class="numbered-list__counter"></span>
,来增加他的值。这么做:
.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
上使用负值索引。如果列表是动态生成的,这也可能造成很棘手的问题。用户必须找到一种方法来追踪索引。
就我个人而言,看到别人都是这样做的:
<ul class="numbered-list" style="counter-reset: name {{{PHP1}}};"> <?php for ($i = 1; $i <= $posts->total_count; $i++): ?> <li class="numbered-list__item"> <span class="numbered-list__counter"> <?php echo $i ?> </span> <!-- Remaining markup --> </li> <?php endfor ?> </ul>
将 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函数可以和其他字符串连接来自定义计数器的内容,例如:
See the Pen 自定义CSS counter(计数器)内容 by (@feiwen8772) on CodePen.dark
CSS counter(计数器)嵌套
CSS计数器对创建有序列表特别有用,因为在子元素中会自动创建一个CSS计数器的实例。使用 counters()
函数,在不同级别的嵌套计数器之间可以插入字符串。比如这个CSS例子:
See the Pen 计数器嵌套Edit by (@feiwen8772) on CodePen.dark
以上例子来自:
最新评论
写的挺好的
有没有兴趣翻译 impatient js? https://exploringjs.com/impatient-js/index.html
Flexbox playground is so great!
感谢总结。
awesome!
这个好像很早就看到类似的文章了
比其他的教程好太多了
柯理化讲的好模糊…没懂