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
Dieser Artikel zeigt Ihnen, wie Sie mit CSS-Rahmen spielen
Rahmenstil Die Eigenschaft „Border-Style“ gibt an...
Warum wird UTF-8 in MySQL nicht empfohlen?
Ich bin kürzlich auf einen Fehler gestoßen, als i...
202 kostenlose, hochwertige XHTML-Vorlagen (1)
Hier präsentiert 123WORDPRESS.COM den ersten Teil...
Detaillierte Erklärung zur Verwendung von JavaScript-Funktionen
Inhaltsverzeichnis 1. Deklarieren Sie eine Funkti...
Zusammenfassung verschiedener gängiger Abfragebeispiele für Join-Tabellen in MySQL
Dieser Artikel beschreibt anhand von Beispielen v...
Detaillierte Erläuterung der Idee zur Implementierung der Funktion zum Anzeigen und Verbergen von Passwörtern in Vue
Wirkung: Ideen: Verwenden Sie das Eingabetypattri...
Lassen Sie uns ausführlich über die LIMIT-Anweisung in MySQL sprechen
Inhaltsverzeichnis Frage Serverebene und Speicher...
Eine kurze Analyse verschiedener Möglichkeiten zum Konfigurieren statischer IP-Adressen in RHEL8
Beim Arbeiten an einem Linux-Server ist das Zuwei...
Beispielcode zum gleichmäßigen Verteilen von Elementen mithilfe des CSS3-Flex-Layouts
In diesem Artikel wird hauptsächlich erläutert, w...
Einführung in die Fuzzy-Abfragemethode mit instr in MySQL
Die Verwendung der internen Funktion instr in MyS...
Vue.js-Framework implementiert Warenkorbfunktion
In diesem Artikel wird der spezifische Code des V...
Schnelle und sichere Methode zum Umbenennen einer MySQL-Datenbank (3 Arten)
Inhaltsverzeichnis So benennen Sie eine MySQL-Dat...
Zusammenfassung der MySQL InnoDB-Architektur
Inhaltsverzeichnis Einführung 1. Gesamtarchitektu...
Detaillierte Erklärung zur Verwendung der Vue h-Funktion
Inhaltsverzeichnis 1. Verstehen 2. Verwendung 1. ...
So verwenden Sie den Linux-Befehl whatis
01. Befehlsübersicht Der Befehl whatis sucht in e...