首页 建站教程 WEB前端 正文

纯css实现列表自动添加序号

我们写样式代码时偶尔会用到数字排行榜的设计,按序号罗列排名,例如:优美mipCms主题中的热门/热评排行:如果用li元素配合list-style: decimal; 属性,会有个英文句号跟在数字后面,不能满足我们想要的效果;如果单独加一个元素专门用来放序号或者图片,又有点大题小做,而且增加页面代码量。 这时我们可以尝试使用伪元素结合counter-incre...

我们写样式代码时偶尔会用到数字排行榜的设计,按序号罗列排名,例如:优美mipCms主题中的热门/热评排行:

纯css实现列表自动添加序号 css排序 css序号 图1

如果用li元素配合list-style: decimal; 属性,会有个英文句号跟在数字后面,不能满足我们想要的效果;如果单独加一个元素专门用来放序号或者图片,又有点大题小做,而且增加页面代码量。

这时我们可以尝试使用伪元素结合counter-increment属性的方法,来简单实现我们想要的效果,具体代码如下:

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;
}

至于排行前三不同的背景颜色可以通过结合nth-child选择器来实现

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;
}
打赏
海报

声明:本站部分资源内容为站内原创著作,也有部分基于互联网公开分享整理,版权归原作者所有。
如侵犯到您的权益,请联系本站,我们会尽快处理,谢谢。转摘请注明出处

本文链接:https://www.umtheme.com/web/189.html

相关推荐

CSS选择指定类元素或根据属性选择通配元素

CSS选择指定类元素或根据属性选择通配元素

css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来根据视觉设计稿定义网页的样式,还原设计稿使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言,并且css样式可以直接存...
WEB前端 2022.07.24 0 137
JQuery实现div模拟select下拉列表

JQuery实现div模拟select下拉列表

对于前端开发者来说,应该都知道默认的select下拉列表比较难看,而且在各个浏览器中select下拉框呈现的默认样式都不一样,尤其是在ie浏览器中,要想把它定义成自己喜欢的样式,简直拿它没什么办法,c...
WEB前端 2022.07.01 0 195
JQuery触发单选radio或多选checkbox隐藏显示div

JQuery触发单选radio或多选checkbox隐藏显示div

需要达到的功能效果就是当点击radio或checkbox时,显示或隐藏某div,这个功能主要用于表单或后台功能配置项,在优美主题配置中也运用到,这样有利于提升用户体验,选择功能显示对应的功能配置。实现...
WEB前端 2022.06.30 3 277

js判断两个input输入框必须任填一个

在表单提交中,有时需要判断两种类型必填其一,如何判断两个input只能填写一个,如果填两个或两个都不填都出现alert验证提示。实现代码如下:<!DOCTYPE html>&...
WEB前端 2021.11.08 0 1002
发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
感谢您的支持