Maison > Article > interface Web > Explication détaillée des exemples d'utilisation du sélecteur de pseudo-classe CSS3 :not()
Explication détaillée des exemples d'utilisation du sélecteur de pseudo-classe CSS3 :not()
- 零下一度original
- 2017-05-05 15:41:551833parcourir
Le nouveau sélecteur de pseudo-classe :not() de CSS3 correspond aux éléments qui ne contiennent pas de sélecteurs. Supposons qu'il existe une liste. Chaque élément de la liste a une ligne de fond, mais le dernier élément n'a pas besoin de ligne de fond. Le cas est le suivant :
<!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>[Recommandations associées]
. 1. Tutoriel vidéo CSS en ligne gratuit
3. php.cn Dugu Jiujian (2) - tutoriel vidéo CSS
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Partagez l'exemple de code de 3 chargements de conceptions en CSS3 (1)Article suivant：Partagez l'exemple de code de 3 chargements de conceptions en CSS3 (1)