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
So erstellen Sie ein stilvolles Webseiten-Design (Grafik-Tutorial)
„Großartig“ sind wahrscheinlich die beiden Worte, ...
Detaillierte Erklärung des Linux-Netstat-Befehls
Inhaltsverzeichnis Linux-Netstat-Befehl 1. Detail...
Vue+Vant implementiert die obere Suchleiste
In diesem Artikelbeispiel wird der spezifische Co...
Beispiel zum Verlassen der Schleife in Array.forEach in js
Inhaltsverzeichnis forEach() Methode So springen ...
Der Implementierungsprozess der Linux-Prozessnetzwerkverkehrsstatistik
Vorwort Linux verfügt über entsprechende Open-Sou...
Implementierung der Elementzeitleiste
Inhaltsverzeichnis Komponenten - Zeitleiste Benut...
Konfliktlösung bei gleichzeitiger Verwendung von Laufschrift und Flash auf einer Seite
Das Hauptsymptom des Konflikts besteht darin, dass...
Eine kurze Diskussion über das Prinzip der Anmeldung durch Scannen von js-QR-Codes
Inhaltsverzeichnis Das Wesentliche beim QR-Code-L...
Uniapp WeChat-Applet: Lösung bei Schlüsselfehler
Uniapp-Code <Vorlage> <Ansicht> <i...
Beispiel für die Konvertierung eines eindimensionalen JS-Arrays in ein dreidimensionales Array
Heute habe ich gesehen, wie ein Freund im Q&A...
So ändern Sie den Replikationsfilter in MySQL dynamisch
MySQL Replikationsfilter dynamisch ändern Lassen ...
Erklärung der Funktionsweise und Verwendung von Redux
Inhaltsverzeichnis 1. Was ist Redux? 2. Das Redux...
jQuery kombiniert mit CSS, um die Funktion „Zurück zum Anfang“ zu erreichen
CSS-Operationen CSS $("").css(name|pro|...
So ändern Sie die Master-Slave-Replikationsoptionen in MySQL online
Vorwort: Die am häufigsten verwendete Architektur...
Detaillierte Erläuterung der Tabellenrückgabe- und Indexabdeckungsbeispiele in MySQL
Inhaltsverzeichnis Indextyp Indexstruktur Nicht g...