Detaillierte Erläuterung der Beispiele für CSS-Gewichtswerte (Kaskadierung)
|
•Es gibt viele Selektoren in CSS. Was passiert, wenn mehrere Selektoren auf dasselbe Element angewendet werden? Code
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="utf-8">
<Titel></Titel>
<style type="text/css">
P{
Farbe: rot;
Schriftgröße: 10px;
}
#wickeln{
Farbe: dunkelrosa;
Schriftgröße: 30px;
}
.Kasten{
Farbe: gelb;
Schriftgröße: 50px;
}
</Stil>
</Kopf>
<Text>
<p Klasse='Box' id="wrap">
Rate mal, welche Farbe ich habe</p>
</body>
</html>• Die Umsetzung kann Ergebnisse hervorbringen
•Zusammenfassung: Dieser Effekt tritt auf, weil der Browser anhand des Gewichtungswerts bestimmt, welcher CSS-Stil verwendet werden soll. Je höher der Gewichtungswert, desto höher ist seine Priorität und dieser CSS-Stil wird angezeigt. Der Gewichtungswert des ID-Selektors ist 100 > Klassenselektor 10 > Tag-Selektor 1, daher ist das Endergebnis der vom ID-Selektor festgelegte Stil. • Beispielcode 2
!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="utf-8">
<Titel></Titel>
<style type="text/css">
*{
Farbe: Cyan;
}
div {
Farbe: gelb;
}
</Stil>
</Kopf>
<Text>
<div>
<p Klasse='Box' id="wrap">
Rate mal, welche Farbe ich habe</p>
</div>
</body>
</html>• Ausführungsergebnisse
•Zusammenfassung: Geerbte Elemente haben keinen Gewichtungswert, daher ist das Endergebnis der vom universellen Selektor festgelegte Stil. • Beispielcode 3
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="utf-8">
<Titel></Titel>
<style type="text/css">
P{
Farbe: gelb;
}
*{
Farbe: Cyan;
}
</Stil>
</Kopf>
<Text>
<div>
<p Klasse='Box' id="wrap">
Rate mal, welche Farbe ich habe</p>
</div>
</body>
</html>• Ausführungsergebnisse
• Zusammenfassung: Das Gewicht des Tag-Selektors beträgt 1, ist aber immer noch größer als das des Universal-Selektors, sodass das Endergebnis der vom Tag-Selektor festgelegte Stil ist. • Beispielcode 4
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="utf-8">
<Titel></Titel>
<style type="text/css">
div p{
Farbe: gelb;
}
div>p{
Farbe: Cyan;
}
P{
Farbe: rot;
}
</Stil>
</Kopf>
<Text>
<div>
<p Klasse='Box' id="wrap">
Rate mal, welche Farbe ich habe</p>
</div>
</body>
</html>• Ausführungsergebnisse
• Beispiel 5 Code
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="utf-8">
<Titel></Titel>
<style type="text/css">
div>p{
Farbe: Cyan;
}
div p{
Farbe: gelb;
}
P{
Farbe: rot;
}
</Stil>
</Kopf>
<Text>
<div>
<p Klasse='Box' id="wrap">
Rate mal, welche Farbe ich habe</p>
</div>
</body>
</html>• Ausführungsergebnisse
Berechnung des Gewichtswertes
<!--Es gibt eine Struktur wie diese: -->
<div Klasse='wrap1' id='box1'>
<div Klasse="wrap2" id="box2">
<p Klasse = 'aktiv'>MJJ</p>
</div>
</div>
<!--Geben Sie einige Beispiele an, um ihre Gewichtungswerte zu sehen: -->
p{color:gray;} <!--Das Gewicht ist 1-->
div div p{color:yellow;} <!--Das Gewicht ist 1+1+1=3-->
.active{color:red;} <!--Gewicht 10-->
div .active{color:black;} <!--Das Gewicht ist 11-->
div div .active{color:blue;} <!--Das Gewicht beträgt 12-->
.wrap #box2 .active{color:purple;} <!--Gewicht ist 120-->
#box1 #box2 .active{color:green;} <!--Gewicht ist 210-->
<!--Hieraus können wir erkennen, dass bei der Berechnung des Gewichtswertes zunächst keine Übertragung erfolgt. Für die verwendeten Selektoren zählen wir einfach, indem wir die Anzahl der Selektoren zählen (in der Reihenfolge zuerst ID, dann Klasse, dann Element), zum Beispiel: -->
#box1 .wrap2 div{ color:red; } <!--Das Gewicht ist 1 1 1-->
Hinweis: Geerbte Attribute haben ebenfalls Gewichtswerte, ihre Gewichtswerte sind jedoch sehr niedrig, was als niedrigster geerbter Gewichtswert verstanden werden kann.
!important Beispiel für eine Erhöhung des Gewichtungswerts<!--Wenn wir Webseitencode erstellen, gibt es einige Sonderfälle, in denen wir für bestimmte Stile den höchsten Gewichtungswert festlegen müssen. Was sollen wir tun? Wenn wir beispielsweise wissen, dass der Gewichtungswert des Inline-Stils 1000 beträgt, was relativ groß ist, können wir das Problem mit !important lösen. -->
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Verwendung von !important</title>
<style type="text/css">
div{
Farbe: grün !wichtig;
}
</Stil>
</Kopf>
<Text>
<div id="box" style="Farbe:rot;">
<span>MJJ</span>
</div>
</body>
</html>• Ausführungsergebnisse
•Zusammenfassung: Die Verwendung von !important ist eine schlechte Angewohnheit und sollte so weit wie möglich vermieden werden, da dadurch die inhärenten Regeln zum Gewichtungsvergleich in Stylesheets ernsthaft verletzt werden und das Debuggen von Fehlern erschwert wird. Wenn zwei widersprüchliche Regeln mit !important auf dasselbe Tag zutreffen, wird die Regel mit der höchsten Priorität verwendet. Wann kann !important verwendet werden? • Der erste ◦Ihre Website verfügt über eine CSS-Datei, die den gesamten Site-Stil gestaltet • Der zweite Wie kann ich die Farbe des Textes auf Rot ändern? In diesem Fall hat die erste Regel immer Vorrang vor der zweiten Regel, wenn !important nicht angewendet wird. Zusammenfassen:
Zusammenfassen Oben finden Sie eine ausführliche Erläuterung des vom Herausgeber eingeführten Beispiels für CSS-Gewichtswerte (Kaskadierung). Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
<<: Code zum Aktivieren von IE8 im IE7-Kompatibilitätsmodus
>>: So konfigurieren Sie die PDFLatex-Umgebung in Docker
Artikel empfehlen
Die Rolle von nextTick in Vue und mehrere einfache Anwendungsszenarien
Zweck Verstehen Sie die Rolle von nextTick und me...
Confluence mit Docker bereitstellen
1. Umweltanforderungen 1. Docker 17 und höher wur...
Der Unterschied zwischen VOLUME und docker -v in Dockerfile
Es gibt offensichtliche Unterschiede zwischen der...
Detaillierte Erläuterung des Prozesses, mit dem Nginx die echte Quell-IP erhält, nachdem mehrere Proxy-Ebenen durchlaufen wurden
Frage Nginx nimmt $remote_addr als echte IP-Adres...
Detaillierte Erklärung der Linux-RPM- und Yum-Befehle und -Verwendung
RPM-Paketverwaltung Ein Verpackungs- und Installa...
Lösen Sie schnell das Problem, dass CentOS in VMware nicht auf das Internet zugreifen kann
Gestern habe ich CentOS7 unter VMware installiert...
Pessimistisches Sperren und optimistisches Sperren in MySQL
In relationalen Datenbanken sind pessimistisches ...
So installieren Sie OpenJDK in Docker und führen das JAR-Paket aus
Bild herunterladen Docker-Pull OpenJDK Erstellen ...
Implementierungscode für mehrzeilige Textkomponenten der Vue-Faltanzeige
Faltdisplay mit mehrzeiligem Textbaustein Falten ...
Detaillierte Installation und Verwendung von SSH in der Ubuntu-Umgebung
SSH steht für Secure Shell, ein sicheres Übertrag...
Die Hintergrundfarbe oder das Bild im Div-Container wächst mit dem Wachstum
Code kopieren Der Code lautet wie folgt: Höhe: au...
Bringen Sie Ihnen bei, wie Sie in 5 Minuten den Redis-Clustermodus und den Sentinelmodus mit Docker erstellen
Inhaltsverzeichnis 1. Vorbereitung Ziehen Sie das...
In einem Artikel erfahren Sie, wie Sie Vue-Frontend-Paging und Backend-Paging implementieren.
Inhaltsverzeichnis 1: Handschriftliche Seitennumm...
Tutorial-Diagramm zur VMware-Installation des Centos8-Systems (Befehlszeilenmodus)
Inhaltsverzeichnis 1. Software- und Systemabbild ...
Implementierung einer Login-Seite basierend auf layui
In diesem Artikelbeispiel wird der spezifische Co...