CSS3 :not()选择器实现最后一行li去除某种css样式


Posted in HTML / CSS onOctober 19, 2016

本文中用到的是CSS3新增的:not()伪类选择符,可以匹配不含有选择符的元素。假定有个列表,每个列表项都有一条底边线,但是最后一项不需要底边线

实例代码如下:

复制代码
代码如下:

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>使用:not() 最后一行li不添加边框</title>
<style type="text/css"></p> <p>/*
使字体在所有设备上都达到最佳的显示
*/
html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}</p> <p>/*
给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;
}</p> <p>/*
设置列表
*/
.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; }

</style>
</head></p> <p><body></p> <p> <div class="listItem">
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ul>
</div>
</body>
</html>

总结
以上就是利用CSS3 :not()选择器去除最后一行li的某种css样式,怎么样?还是很方便的吧,希望这篇文章对大家学习或者使用CSS3能有所帮助,如果有疑问大家可以留言交流。

HTML / CSS 相关文章推荐
网页布局中CSS样式无效的十个重要原因详解
Aug 10 HTML / CSS
CSS3制作翻转效果_动力节点Java学院整理
Jul 11 HTML / CSS
利用css3 translate完美实现表头固定效果
Feb 28 HTML / CSS
css3.0新属性效果在ie下的解决方案
May 10 HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
css3+jq创作含苞待放的荷花
Feb 20 HTML / CSS
如何用css3实现switch组件开关的方法
Feb 09 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
Apr 28 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
Jul 11 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
Feb 18 HTML / CSS
Html5通过数据流方式播放视频的实现
Apr 27 HTML / CSS
CSS3点击按钮实现背景渐变动画效果
Oct 19 #HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 #HTML / CSS
利用CSS3实现平移动画效果示例代码
Oct 12 #HTML / CSS
CSS3模拟IOS滑动开关效果
Sep 28 #HTML / CSS
CSS3打造磨砂玻璃背景效果
Sep 28 #HTML / CSS
利用CSS3实现折角效果实例源码
Sep 28 #HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 #HTML / CSS
You might like
PHP 开源AJAX框架14种
2009/08/24 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
php+mysqli使用面向对象方式查询数据库实例
2015/01/29 PHP
PHP云打印类完整示例
2016/10/15 PHP
Jquery中getJSON在asp.net中的使用说明
2011/03/10 Javascript
js 链式延迟执行DOME
2012/01/04 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
jQuery中unwrap()方法用法实例
2015/01/16 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
浅析Python中的多重继承
2015/04/28 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
python3爬取数据至mysql的方法
2018/06/26 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
python搜索包的路径的实现方法
2019/07/19 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
python3实现单目标粒子群算法
2019/11/14 Python
使用python实现对元素的长截图功能
2019/11/14 Python
python函数中将变量名转换成字符串实例
2020/05/11 Python
Python Request类源码实现方法及原理解析
2020/08/17 Python
童装店创业计划书
2014/01/09 职场文书
毕业生自荐信格式
2014/03/07 职场文书
意向协议书范本
2014/04/23 职场文书
竞选学习委员演讲稿
2014/04/28 职场文书
团队激励口号
2014/06/06 职场文书
师德标兵先进事迹材料
2014/12/19 职场文书
管理失职检讨书范文
2015/05/05 职场文书
2019销售早会主持词
2019/06/27 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python
教你用Python matplotlib库制作简单的动画
2021/06/11 Python
总结Pyinstaller打包的高级用法
2021/06/28 Python
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python
Vue ECharts实现机舱座位选择展示功能
2022/05/15 Vue.js