这次给大家带来not()选择器的使用，使用not()选择器的注意事项有哪些，下面就是实战案例，一起来看一下。
本文中用到的是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> <p class="listItem">
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ul>
</p>
</body>
</html>
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci not()选择器的使用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Detik WeChat, dua sengkang dan satu titik
Kedudukan sepuluh platform dagangan formal teratas
git undo menyerahkan komit
lokasi.muat semula
Penggunaan lain dalam struktur gelung Python
Adakah sukar untuk belajar Java sendiri?
Apakah tahap penilaian bintang pengguna mudah alih?
Bagaimana untuk menyalin jadual Excel untuk menjadikannya saiz yang sama dengan yang asal
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
