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 相关文章推荐
前端制作动画的几种方式(css3,js)
Dec 12 HTML / CSS
CSS3实现任意图片lowpoly动画效果实例
May 11 HTML / CSS
纯CSS3实现表单验证效果(非常不错)
Jan 18 HTML / CSS
CSS3教程(2):网页边框半径和网页圆角
Apr 02 HTML / CSS
如何利用CSS3制作3D效果文字具体实现样式
May 02 HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 HTML / CSS
Html5+JS实现手机摇一摇功能
Apr 24 HTML / CSS
HTML5中使用json对象的实例代码
Sep 10 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
Dec 02 HTML / CSS
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
Apr 22 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的类 功能齐全的发送邮件类
2006/10/09 PHP
PHP生成便于打印的网页
2006/10/09 PHP
mysql 搜索之简单应用
2007/04/27 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
2018/03/06 Javascript
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
小程序转发探索示例
2019/02/19 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
一个Python最简单的接口自动化框架
2018/01/02 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
python实现图片彩色转化为素描
2019/01/15 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
工程测量与监理专业应届生求职信
2013/11/27 职场文书
最经典的大学生职业生涯规划范文
2014/03/05 职场文书
高校教师自荐信范文
2014/03/13 职场文书
有趣的广告词
2014/03/18 职场文书
写给老师的保证书
2015/05/09 职场文书
领导欢送会主持词
2015/07/06 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书
Python基本数据类型之字符串str
2021/07/21 Python
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android