欢迎光临
我们一直在努力

li元素的常见伪类:ul列表第一个li和最后一个li的样式解决办法

在网站开发中,尤其是对资讯网站中,通常需要做出热门文章的列表,排名等等样式,里面就会应用到排序的从0-10等等数值,数值中,我们通常会对前三或是前五进行特别的样式调整。比如我们需要把第一个改成红色的背景,把最后一个样式下面加一个更多的按钮 ,这样我们都可以使用li伪类来对前端的样式进行调整。

尤其是在wordpress主题的开发中,在前端应用很广泛li的第一个及最后一个都可以进行单独的设置,甚至是li的奇偶数的,或是特定的某个位置都可以使用伪类来进行设置,相当于li的一个小跟班,只对某个li起作用。

第一个li的样式:li:first-child {  background:#f00;  }
最后一个li的样式:li:last-child {  background:#000;  }
第n个li的样式:li:nth-child(n) {  background:#000;  }
倒数第二个li的样式:nth-last-of-type(2){  background:#000;  }
奇数列表:li:nth-child(odd) {  background:#f00;  }
偶数列表:li:nth-child(even) {  background:#f00;  }

 

赞(0) 打赏
未经允许不得转载:WORDPRESS大侠 » li元素的常见伪类:ul列表第一个li和最后一个li的样式解决办法

评论 抢沙发

评论前必须登录!

 

更好的WordPress主题

支持快讯、专题、百度收录推送、人机验证、多级分类筛选器,适用于垂直站点、科技博客、个人站,扁平化设计、简洁白色、超多功能配置、会员中心、直达链接、文章图片弹窗、自动缩略图等...

联系我们联系我们

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续提供更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫

微信扫一扫

登录

找回密码

注册