CSS-Prioritätsmechanismus

Priorität der Stile

Mehrere Stile: Wenn externe Stile, interne Stile und Inline-Stile gleichzeitig auf dasselbe Element angewendet werden, handelt es sich um mehrere Stile.

Im Allgemeinen 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:

      /* 内部样式 */

      h3{color:green;}

    

测试！

Priorität des Selektors

Erklärung:

1. Das maximale Gewicht des Inline-Stylesheets beträgt 1000; Das Gewicht des Klassenselektors beträgt 10

4. Das Gewicht des HTML-Tag-Selektors beträgt 1

Verwenden Sie das Gewicht des Selektors, um Berechnungen und Vergleiche durchzuführen. Das Beispiel lautet wie folgt:

Ergebnis: Die Daten im -Tag werden blau angezeigt.

CSS-Prioritätsregel:

A Selektoren haben ein Gewicht. Je größer das Gewicht, desto höher die Priorität.

B Wenn die Gewichte gleich sind Später angezeigte Stylesheet-Einstellungen sind besser als die zuerst angezeigten Stylesheet-Einstellungen.

C Die Regeln des Erstellers sind höher als die des Browsers: Das heißt, der vom Webseitenautor festgelegte CSS-Stil hat einen höheren Wert Priorität als die durch den Browser-Stil festgelegte;

D Der geerbte CSS-Stil ist nicht so gut wie der später angegebene CSS-Stil; Die mit „!important“ gekennzeichnete Regel ist die höchste; das Beispiel lautet wie folgt:

Ergebnis: Wird unter Firefox in Blau angezeigt; Unter IE 6 wird es in Rot angezeigt.

Verwenden Sie ein Skript, um Stile hinzuzufügen.

Wenn Nach der Verbindung Wenn Sie den externen Stil verwenden und dann mithilfe eines JavaScript-Skripts den internen Stil einfügen (d. h. der interne Stil wird mithilfe eines Skripts erstellt), zeigt der IE-Browser seine Einzigartigkeit. Der Code lautet wie folgt:

Ergebnis: In Firefox / Chrome / Safari / Opera ist der Text blau. Im IE-Browser ist der Text grün.

JavaScript-Code

anhängen, um Stilinhalte im IE hinzuzufügen:

var s=document.createElement("style");

var head=document.getElementsByTagName("head").item(0);

var link=document.getElementsByTagName("link").item(0);

head.insertBefore(s,link);

/* 注意：在IE 中，

   虽然代码是将

   但实际内存中，

   这也是“IE中奇怪的应用CSS的BUG”之所在！

*/

var oStyleSheet = document.styleSheets[0];

//这实际是在的外部样式中追加

oStyleSheet.addRule("h3","color:green;");

alert(oStyleSheet.rules[0].style.cssText);

alert(document.styleSheets[0].rules[0].style.cssText);

//方式2

var cssStr="h3 {color:green;}";

document.styleSheets.item(document.styleSheets.length-1).cssText=cssStr;

Die Reihenfolge beim Herunterladen oder Rendern des IE-Browsers kann wie folgt sein:

● Die Reihenfolge beim Herunterladen des IE ist von oben nach unten;

● Die Ausführung von JavaScript-Funktionen wird blockiert IE-Download ;

● Die Reihenfolge des IE-Renderings erfolgt ebenfalls von oben nach unten.

● IE-Download und Rendering erfolgen gleichzeitig In einem bestimmten Teil der Seite wurden alle oben genannten Teile heruntergeladen (dies bedeutet jedoch nicht, dass alle zugehörigen Elemente heruntergeladen wurden.)

● Wenn während des Downloadvorgangs ein Tag angetroffen wird und die Datei nicht heruntergeladen wird eingebettet Es ist semantisch interpretierbar (zum Beispiel: JS-Skript, CSS-Stil), dann ermöglicht der Download-Prozess von IE zu diesem Zeitpunkt eine separate Verbindung zum Herunterladen. Und es wird nach dem Herunterladen analysiert. Bei einer Neudefinition in JS oder CSS ü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.

● Die Reihenfolge, in der Firefox das Herunterladen und Rendern durchführt, ist ungefähr gleich, abgesehen von einigen subtilen Unterschieden, wie z. B. dem Rendern von Iframes.

Weitere Artikel zum CSS-Prioritätsmechanismus finden Sie auf der chinesischen PHP-Website!