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
Detaillierte Erklärung des Codes zwischen der MySQL-Masterbibliothek Binlog (Master-Log) und der Slave-Bibliothek Relay-Log
Binärprotokoll der Hauptbibliothek: # bei 2420 #1...
Erstellung von Webseiten – Grundlegende Deklaration – Dokumenttypbeschreibung (DTD
Die Verwendung von CSS-Layouts zum Erstellen von W...
22 Vue-Optimierungstipps (Projektpraxis)
Inhaltsverzeichnis Code-Optimierung Verwenden der...
Was ist HTML?
Geschichte der HTML-Entwicklung: HTML steht im En...
Vue Learning - Grundlagen des VueRouter-Routings
Inhaltsverzeichnis 1. VueRouter 1. Beschreibung 2...
Verwenden Sie ein Iframe, um das Formular zu senden, ohne die Seite zu aktualisieren
Deshalb führen wir ein Einbettungsframework ein, u...
Detaillierte Erläuterung der Konstruktion der Lese-/Schreibtrennung bei der MySQL-Master-Slave-Replikation
MySQL Master-Slave-Einrichtung Die Einstellungen ...
Grafisches Tutorial zur Installation einer virtuellen VMware-Maschine unter Linux
In diesem Artikel werden die einzelnen Schritte d...
SSM-Projekte werden häufig als War-Pakete bereitgestellt, wobei Tomcat und Maven zur Implementierung der Hot-Deployment-Konfiguration verwendet werden.
Hintergrund Wie wir alle wissen, müssen wir nach ...
HTML ist etwas, das Webseiten-Ersteller lernen und beherrschen müssen.
Welche Vorteile bietet das Erlernen von HTML? 1: ...
Verwenden Sie das Rem-Layout, um eine adaptive
Ich habe bereits einen Artikel über mobile Anpass...
Detailliertes Beispiel einer MySQL-Austauschpartition
Detailliertes Beispiel einer MySQL-Austauschparti...
Details zum Prototypmodus des Javascript-Entwurfsmusters
Inhaltsverzeichnis 1. Prototyp-Modus Beispiel 1 B...
CSS verwendet das Autoflow-Attribut, um einen Sitzauswahleffekt zu erzielen
1. Autoflow-Attribut: Wenn die Länge und Breite d...
Unabhängige Implementierung der Nginx-Containerkonfigurationsdatei
Erstellen eines Containers [root@server1 ~]# dock...