Web-FrontendCSS-TutorialDer Not()-Selektor in CSS3 implementiert die letzte Zeile des Li-Codes, um einen bestimmten CSS-Stil zu entfernenDer Not()-Selektor in CSS3 implementiert die letzte Zeile des Li-Codes, um einen bestimmten CSS-Stil zu entfernen
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>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!
Eine kleine Erinnerung daran, dass Pseudoelemente Kinder sind.Apr 19, 2025 am 11:39 AMHier ist ein Container mit einigen Kinderelementen:
Menüs mit 'dynamischen Trefferbereichen'Apr 19, 2025 am 11:37 AMFlyout -Menüs! Das zweite, das Sie für ein Menü implementieren müssen, das ein Hover -Ereignis verwendet, um mehr Menüelemente anzuzeigen. Zum einen sollten sie
Verbesserung der Video -Zugänglichkeit mit WebVTTApr 19, 2025 am 11:27 AM"Die Kraft des Web liegt in seiner Universalität. Zugang von allen unabhängig von Behinderung ist ein wesentlicher Aspekt."- Tim Berners-Lee
Wöchentliche Plattform News: CSS :: Marker Pseudo-Element, Vorrendern von Webkomponenten, Hinzufügen von Webmenting zu Ihrer WebsiteApr 19, 2025 am 11:25 AMIn der Roundup:#039: DatePickers geben Tastaturbenutzer Kopfschmerzen, einen neuen Webkomponenten -Compiler, der bei der Bekämpfung von Fouc hilft.
Breite und flexible Gegenstände gut zusammen spielenApr 19, 2025 am 11:23 AMDie kurze Antwort: Flex-Shrink und Flex-Basis sind wahrscheinlich das, worauf Sie suchen.
Positionieren Sie klebrige und TischkopfzeileApr 19, 2025 am 11:21 AMSie können nicht positioniert werden: klebrig; A
Wöchentliche Plattformnachrichten: HTML -Inspektion in der Suchkonsole, globaler Umfang von Skripten, Babel Env fügt Standardabfrage hinzuApr 19, 2025 am 11:18 AMIn der Welt der Web -Plattform -Nachrichten, in der die Google Search Console in der Welt der Web -Plattform -News -Such -Markup umgeht, lernen wir, dass benutzerdefinierte Eigenschaften einfacher werden können
IndieWeb und WebmentionsApr 19, 2025 am 11:16 AMDas IndieWeb ist eine Sache! Sie haben eine Konferenz und alles bekommen. Der New Yorker schreibt sogar darüber:
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
PHPStorm Mac-Version
Das neueste (2018.2.1) professionelle, integrierte PHP-Entwicklungstool
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
SAP NetWeaver Server-Adapter für Eclipse
Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.
EditPlus chinesische Crack-Version
Geringe Größe, Syntaxhervorhebung, unterstützt keine Code-Eingabeaufforderungsfunktion
DVWA
Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software
