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 Flexbox中flex-shrink属性的用法示例介绍
Dec 30 HTML / CSS
css3+jq创作含苞待放的荷花
Feb 20 HTML / CSS
CSS3 中的@keyframes介绍
Sep 02 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
CSS3中Transition动画属性用法详解
Jul 04 HTML / CSS
纯CSS3实现运行时钟的示例代码
Jan 25 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
Jul 11 HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
Nov 30 HTML / CSS
基于CSS3画一个iPhone
Apr 21 HTML / CSS
CSS实现两列布局的N种方法
Aug 02 HTML / CSS
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
Sep 23 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自动更新新闻DIY
2006/10/09 PHP
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
thinkphp控制器调度使用示例
2014/02/24 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
如何打开php的gd2库
2017/02/09 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
Javascript 中的 &amp;&amp; 和 || 使用小结
2010/04/25 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
jQuery动态修改超链接地址的方法
2015/02/13 Javascript
JavaScript类的写法
2016/09/17 Javascript
微信小程序 登录的简单实现
2017/04/19 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
vue中父子组件的参数传递和应用示例
2021/01/04 Vue.js
Python中subprocess模块用法实例详解
2015/05/20 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
基于python调用psutil模块过程解析
2019/12/20 Python
python中append函数用法讲解
2020/12/11 Python
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
屈臣氏俄罗斯在线商店:Watsons俄罗斯
2020/08/03 全球购物
Java基础类库面试题
2013/09/04 面试题
儿媳婚宴答谢词
2014/01/14 职场文书
大学生优秀自荐信范文
2014/02/25 职场文书
2014年毕业演讲稿范文
2014/05/13 职场文书
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫