首页 / CSS3 / 详解CSS3:not()伪类选择符的用法实例

详解CSS3:not()伪类选择符的用法实例

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了详解CSS3:not()伪类选择符的用法实例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1350字，纯文字阅读大概需要2分钟。

内容图文

CSS3新增的:not()伪类选择符，匹配不含有选择符的元素。假定有个列表，每个列表项都有一条底边线，但是最后一项不需要底边线，案例如下：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>使用:not() 最后一行li不添加边框</title>
<style type="text/css">

/*    
    使字体在所有设备上都达到最佳的显示
*/
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; }

</style>
</head>

<body>

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

【相关推荐】

1. 免费css在线视频教程

2. css在线手册

3. php.cn独孤九贱（2）－css视频教程

以上就是详解CSS3 :not()伪类选择符的用法实例的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的详解CSS3:not()伪类选择符的用法实例全部内容，希望文章能够帮你解决详解CSS3:not()伪类选择符的用法实例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/413939.html

来源：【匿名】