很多网站侧边栏都会搞热门文章,热门评论...按序号罗列排名,一般都是用PHP实现,但对新手不太友好。其实我们也可以用CSS来实现列表自动添加序号。
html代码
<ul>
<li>标题</li>
<li>标题</li>
<li>标题</li>
<li>标题</li>
<li>标题</li>
</ul>
css样式
ul {
margin: 0;
padding: 0;
counter-reset: li;
}
ul > li:before {
content: counter(li);
counter-increment: li;
}
PS:通过伪元素counter-increment属性,可以实现自动添加序号
css背景
ul > li:nth-child(1):before,ul > li:nth-child(2):before,ul > li:nth-child(3):before{color: #fff;}
ul > li:nth-child(1):before {
background: #FF6B57;
}
ul > li:nth-child(2):before {
background: #2ea7e0;
}
ul > li:nth-child(3):before {
background: #6bc30d;
}
PS:排行前三显示不同的背景颜色,通过nth-child选择器来实现。
广告插入