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的resize属性使用初探
Sep 27 HTML / CSS
详解CSS3浏览器兼容
Dec 14 HTML / CSS
IE支持HTML5的解决方法
Oct 20 HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
Jun 21 HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
Jun 06 HTML / CSS
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
Mar 07 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
Mar 01 HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
Aug 17 HTML / CSS
移动端Html5页面生成图片解决方案
Aug 07 HTML / CSS
VSCode 自定义html5模板的实现
Dec 05 HTML / CSS
HTML5页面音频自动播放的实现方式
Jun 21 HTML / CSS
在HTML中引入CSS的几种方式介绍
Dec 06 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保存二进制原始数据为图片的程序代码
2014/10/14 PHP
PHP制作图形验证码代码分享
2014/10/23 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
js 火狐下取本地路径实现思路
2013/04/02 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
vue基于Echarts的拖拽数据可视化功能实现
2020/12/04 Vue.js
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
Python 结巴分词实现关键词抽取分析
2017/10/21 Python
Python语言生成水仙花数代码示例
2017/12/18 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
python访问hdfs的操作
2020/06/06 Python
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
集团公司人力资源部岗位职责
2014/01/03 职场文书
机修工工作职责
2014/02/21 职场文书
计算机毕业生自荐信
2014/06/12 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
SQL CASE 表达式的具体使用
2022/03/21 SQL Server