CSS去掉最后一行的分割线
分类:实例代码
CSS去掉最后一行的分割线属于前端实例代码,有关更多实例代码大家可以查看。
制作新闻列表的时候,为了增强辨识度,行与行之间通常加一个分割线,但不希望最后一行出现分割线。
下面通过一个代码实例介绍一下如何利用CSS实现此功能。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> .box { list-style: none; width:400px; margin: 0; padding: 20px; margin: 4rem auto; background: #ccc; } .box li:not(:last-of-type){ border-bottom: 1px solid #000; margin-bottom: .5rem; padding-bottom: .5rem; } </style> </head> <body> <ul class="box"> <li>欢迎来到前端教程网</li> <li>只有努力奋斗才会有美好的未来</li> <li>每一天都是新的,要好好珍惜</li> <li>本站url地址是www.pipipi.net</li> <li>分享互助是进步最大动力</li> </ul> </body> </html>
分隔线就是li元素底部的边框,当然最后一个li元素的边框不做设置。
相关阅读:
(1).rem参阅CSS3 rem一章节。
(2).:not()参阅CSS E:not()伪类选择符一章节。
(3).:last-of-type参阅CSS E:last-of-type伪类选择器一章节。
CSS去掉最后一行的分割线,这样的场景在实际项目中还是用的比较多的,关于CSS去掉最后一行的分割线就介绍到这了。
一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu