Le sélecteur not() en CSS3 implémente la dernière ligne de code li pour supprimer un certain style CSS-tutoriel CSS-php.cn

Le sélecteur not() en CSS3 implémente la dernière ligne de code li pour supprimer un certain style CSS

不言

Libérer： 2018-06-14 17:19:55

original

3983 Les gens l'ont consulté

Cet article présente principalement le code du sélecteur not() en CSS3 pour implémenter la dernière ligne de li pour supprimer certains styles CSS. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer. 🎜>

Dans le développement quotidien, nous constatons souvent que le dernier li de la boucle est différent des autres li Pour supprimer un certain style CSS, cet article présente l'utilisation du nouveau sélecteur de pseudo-classe :not() en CSS3. pour y parvenir, c'est très pratique à utiliser. Les amis intéressés peuvent venir jeter un œil ci-dessous.

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

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Analyse du sélecteur de pseudo-classe de statut d'élément d'interface utilisateur de CSS3

Analyse du sélecteur de pseudo-classe par défaut de CSS3

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!