Utilisation du sélecteur not()-tutoriel CSS-php.cn

Utilisation du sélecteur not()

php中世界最好的语言

Libérer： 2018-03-22 17:23:59

original

3075 Les gens l'ont consulté

Cette fois je vais vous présenter l'utilisation du sélecteur not(). Quelles sont les précautions lors de l'utilisation du sélecteur not() Voici un cas pratique, jetons un oeil.

Ce qui est utilisé dans cet article est le nouveau sélecteur de pseudo-classe :not() en CSS3, qui peut correspondre aux éléments qui ne contiennent pas de sélecteur. Supposons qu'il existe une liste, chaque élément de la liste a une ligne de bas, mais le dernier élément n'a pas besoin de ligne de bas

L'exemple de code est le suivant :

<!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>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas présenté dans cet article. Pour des informations plus intéressantes, veuillez. faites attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

Trois façons de centrer horizontalement et verticalement des éléments absolument positionnés

largeur : 100 % ; différence dans l'utilisation de width:auto

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!