纯css计数器
纯css3的计数器
counter 来实现
简单点说,就是完全使用css实现计数器. 达到类似<li>
标签的效果.
为什么不用js或php 这种动态语言直接使用呢?
原因:
- 很多时候前后端分离,样式与内容分离. 类似
1,2,3...
这种只起来到修饰作用,方便调整修改的样式. - 内容是动态输出来的或随机的, 不确定输出到页面时序号. 通过js再处理一遍更加复杂.
- 减少页面动态渲染. 减少js的加载阻塞.
- 做SEO内容时,有一些修饰的内容,不必要加到内容中.
- 一些列表是局部渲染的,加塞或者删除,使用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一样的列表.
counter-reset: my-rank;
,在父级上定义一个my-rank的计数器;counter-increment: my-rank;
,每次遇到一个.li
的元素+1;content: 'No.' counter(my-rank);
,在伪元素上展示计数器;
下一节,详细展开counter来说说.
自定义序号. 用 中文一,二,三,四
,冠军,亚军,季军
,⭐,⭐⭐,⭐⭐⭐
,图片等.
原作者:阿金
本文地址:https://hi-arkin.com/archives/counter-1.html