Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Der Not()-Selektor in CSS3 implementiert die letzte Zeile des Li-Codes, um einen bestimmten CSS-Stil zu entfernen

不言
Freigeben: 2018-06-14 17:19:55
Original
3970 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich den Code des Not()-Selektors in CSS3 vor, um die letzte Zeile von li zu implementieren, um einen bestimmten CSS-Stil zu entfernen. Jetzt kann ich ihn mit Ihnen teilen

In der täglichen Entwicklung stellen wir häufig fest, dass sich das letzte Li in der Schleife von anderen Li unterscheidet. Um einen bestimmten CSS-Stil zu entfernen, wird in diesem Artikel die Verwendung des neuen Pseudoklassenselektors :not() vorgestellt CSS3 zu erreichen Es ist sehr bequem zu verwenden. Freunde, die interessiert sind, können unten einen Blick darauf werfen.

In diesem Artikel wird der neue Pseudoklassenselektor :not() in CSS3 verwendet, der Elemente abgleichen kann, die keine Selektoren enthalten. Angenommen, es gibt eine Liste, jedes Listenelement hat eine Endzeile, aber das letzte Element benötigt keine Endzeile

Der Beispielcode lautet wie folgt:

<!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>
Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Analyse des UI-Elementstatus-Pseudoklassenselektors von CSS3

Analyse des Standard-Pseudoklassenselektors von CSS3

Das obige ist der detaillierte Inhalt vonDer Not()-Selektor in CSS3 implementiert die letzte Zeile des Li-Codes, um einen bestimmten CSS-Stil zu entfernen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage