这篇文章主要介绍了关于css3中not()选择器实现最后一行li去除某种css样式的代码，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
在日常开发中经常会遇到在循环中的最后一个li不同于其他的li，要去除某种css样式，本文介绍的是利用CSS3新增的:not()伪类选择符，实现起来非常的方便，感兴趣的朋友们下面来一起看看吧。
本文中用到的是CSS3新增的:not()伪类选择符，可以匹配不含有选择符的元素。假定有个列表，每个列表项都有一条底边线，但是最后一项不需要底边线
实例代码如下：
使用:not() 最后一行li不添加边框 /* 使字体在所有设备上都达到最佳的显示*/html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* 给body添加阴影*/body:before { content: ""; position: fixed; top: -10px; left: 0; width: 100%; height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); box-shadow: 0px 0px 10px rgba(0,0,0,.8); z-index: 100;}
/* 设置列表*/.listItem { border: 1px solid red;}.listItem ul { width: 100%; overflow:hidden;}.listItem ul,listItem li { margin:0; padding:0; list-style:none;}.listItem li { margin-left:10px;}/* li 最后一个元素不添加边框*/.listItem li:not(:last-child) { border-bottom:1px solid green; }/* 与第一个li相连兄弟*/.listItem li:first-child ~ li { border-left: 1px solid #666; }
立即学习“前端免费学习笔记（深入）”；
- 列表1
- 列表2
- 列表3
- 列表4
- 列表5
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
关于css3的UI元素状态伪类选择器的分析
CSS3的default伪类选择器的解析
以上就是CSS3中not()选择器实现最后一行li去除某种css样式的代码的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1610191.html
微信扫一扫 
支付宝扫一扫 
