Heim > Artikel > Web-Frontend > Prioritätsregel im CSS-Stil
Prioritätsregel im CSS-Stil
- 王林nach vorne
- 2021-01-30 10:31:184241Durchsuche
Einführung in die CSS-Stilpriorität:
Wenn externer Stil, interner Stil und Inline-Stil gleichzeitig auf dasselbe Element angewendet werden, ist die Priorität wie folgt:
(Externer Stil) Externes Stylesheet
Es gibt eine Ausnahme: Wenn der externe Stil nach dem internen Stil platziert wird, überschreibt der externe Stil den internen Stil.
Beispiele sind wie folgt:
rrreeDie Priorität des Selektors
Erläuterung:
1. Das Gewicht des Inline-Stylesheets beträgt bis zu 1000;
2. Das Gewicht des ID-Selektors beträgt 100
3. Die Gewichtung des Klassenselektors beträgt 10
4. Die Gewichtung des HTML-Tag-Selektors beträgt 1
Verwenden Sie die Gewichtung des Selektors zum Berechnen und Vergleichen. Daten im -Tag werden blau angezeigt.
CSS-Prioritätsregel:
A Jeder Selektor hat eine Gewichtung. Je größer die Gewichtung, desto höher die Priorität.
B Wenn die Gewichtungen gleich sind, sind die später angezeigten Stylesheet-Einstellungen besser als die zuerst angezeigten Stylesheet-Einstellungen.
C Die Regeln des Erstellers sind höher als die des Betrachters: Das heißt, der vom Webseitenautor festgelegte CSS-Stil hat eine höhere Priorität als der vom Browser festgelegte Stil.
D Der geerbte CSS-Stil ist nicht so gut wie der später angegebene CSS-Stil;
E In den Gruppenattributeinstellungen haben die mit „!important“ gekennzeichneten Regeln die höchste Priorität;
Ergebnis: Wird unter Firefox in Blau angezeigt; In IE 6 wird Rot angezeigt. Verwenden Sie Skripte, um Stile hinzuzufügen. , IE-Browser zeigt seine Einzigartigkeit. Der Code lautet wie folgt:<head>
<style type="text/css">
/* 内部样式 */
h3{color:green;}
</style>
<!-- 外部样式 style.css -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- 设置：h3{color:blue;} -->
</head>
<body>
<h3>测试！</h3>
</body>Ergebnis: In Firefox/Chrome/Safari/Opera ist der Text komplett blau. Im IE-Browser ist der Text grün. ZusätzlicherJavaScript-Code zum Hinzufügen von Stilinhalten im IE: <html>
<head>
<style type="text/css">
#redP p {
/* 权值 = 100+1=101 */
color:#F00; /* 红色 */
}
#redP .red em {
/* 权值 = 100+10+1=111 */
color:#00F; /* 蓝色 */
}
#redP p span em {
/* 权值 = 100+1+1+1=103 */
color:#FF0;/*黄色*/
}
</style>
</head>
<body>
<div id="redP">
<p class="red">red
<span><em>em red</em></span>
</p>
<p>red</p>
</div>
</body>
</html>Die Reihenfolge des Herunterladens oder Renderns des IE-Browsers kann wie folgt sein: ● Die Reihenfolge des IE-Downloads erfolgt von oben nach unten. ● Die Ausführung von JavaScript-Funktionen blockieren das Herunterladen des IE. ● Die Reihenfolge des IE-Renderings erfolgt ebenfalls von oben nach unten. ● Das Herunterladen und Rendern des IE erfolgt gleichzeitig , alle darüber liegenden Teile wurden Der Download ist abgeschlossen (dies bedeutet jedoch nicht, dass alle zugehörigen Elemente heruntergeladen wurden.) ● Wenn während des Download-Vorgangs ein Tag angetroffen wird und es sich um eine eingebettete Datei handelt, wird die Datei semantisch interpretierbar ist (zum Beispiel: JS-Skript, CSS-Stil), dann ermöglicht der Download-Prozess des IE eine separate Verbindung zum Herunterladen. Und es wird nach dem Herunterladen analysiert. Wenn es eine Neudefinition in JS oder CSS gibt, überschreiben die später definierten Funktionen die zuvor definierten Funktionen. ● Stoppen Sie während des Analysevorgangs den Download aller nach unten gerichteten Elemente der Seite. Die Stylesheet-Datei ist etwas Besonderes. Nachdem sie heruntergeladen wurde, wird sie zusammen mit allen zuvor heruntergeladenen Stylesheets analysiert. Nach Abschluss der Analyse werden alle vorherigen Elemente (einschließlich derjenigen, die zuvor gerendert wurden) erneut gerendert. Und fahren Sie mit dem Rendern auf diese Weise fort, bis die gesamte Seite gerendert ist. ● Firefox verarbeitet das Herunterladen und Rendern in etwa in der gleichen Reihenfolge, mit Ausnahme einiger subtiler Unterschiede, wie z. B. dem Iframe-Rendering. Verwandte Empfehlungen: CSS-Tutorial
Das obige ist der detaillierte Inhalt vonPrioritätsregel im CSS-Stil. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!