纯css3的计数器

counter 来实现

简单点说,就是完全使用css实现计数器. 达到类似<li>标签的效果.

为什么不用js或php 这种动态语言直接使用呢?

原因:

1. 很多时候前后端分离,样式与内容分离. 类似1,2,3...这种只起来到修饰作用,方便调整修改的样式.
2. 内容是动态输出来的或随机的, 不确定输出到页面时序号. 通过js再处理一遍更加复杂.
3. 减少页面动态渲染. 减少js的加载阻塞.
4. 做SEO内容时,有一些修饰的内容,不必要加到内容中.
5. 一些列表是局部渲染的,加塞或者删除,使用css不必担心序号错乱.

举例:

<ul> 列表内容动态添加和删除,展示和隐藏,都不需要重新使用JS遍历一遍元素.

<ol class="demo1">
    <li>苹果</li>
    <li>香蕉</li>
    <li>桃子</li>
    <li style="display:none;">菠萝</li>
    <li style="visibility:hidden">荔枝</li>
    <li>枇杷</li>
    <li>西瓜</li>
    <li>梨子</li>
    <li>李子</li>
</ol>

<script>
  
 setTimeout(function(){
    
    document.querySelector(".demo1 li:nth-child(3)").remove();

    var newLi=document.createElement("li")
    newLi.textContent="黄瓜";
    newLi.style.color="red"
    document.querySelector(".demo1").appendChild(newLi);

 },1000)

</script>

结果:

ul或ol是自带的列表.

如果是其他非ul的列表的,如何实现ul一样的效果呢?

就通过自定义计数器,配合::before 或者 ::after 伪元素来实现.

一个用户排名列表的例子:

代码:

通过例子,只需要三步就可以实现一个li一样的列表.

1. counter-reset: my-rank;,在父级上定义一个my-rank的计数器;
2. counter-increment: my-rank;,每次遇到一个.li的元素+1;
3. content: 'No.' counter(my-rank);,在伪元素上展示计数器;

下一节,详细展开counter来说说.
自定义序号. 用 中文一,二,三,四,冠军,亚军,季军,⭐,⭐⭐,⭐⭐⭐,图片等.

原作者:阿金
本文地址：https://hi-arkin.com/archives/counter-1.html