Die Rolle von !important in CSS

!important ist eine in CSS1 definierte Syntax, die verwendet wird, um die Anwendungspriorität bestimmter Stilregeln zu erhöhen. Syntaxformat { cssRule !important }

{*cssRule !important} Diese CSS-Regel ist in der Webseitenproduktion sehr beliebt geworden. In der Vergangenheit blieb mein Verständnis davon auf der Stufe „ob der Browser sie erkennt“. „‚Ich habe es nicht wirklich studiert, aber jetzt haben sich die Dinge geändert.‘ Schauen wir uns ein paar Beispiele an.

Beispiel 1:

CSS

#Box {

Farbe: rot !important;

Farbe: blau;

Auffüllung: 30 Pixel;

Breite: 300 Pixel;

Rand: 1 Pixel einfarbig rosa;

}

Html

In verschiedenen Browsern sollte die Farbe dieser Textzeile unterschiedlich sein!

Dann kann in Browsern, die diese Syntax unterstützen, wie Firefox, Opera und Chrome, die Priorität von !important verstanden werden und die Schriftfarbe wird rot angezeigt , während es im IE blau angezeigt wird. Da der IE-Browser !important nicht erkennt, erkennen Nicht-IE-Browser !important und !important hat eine höhere Priorität. Schauen Sie sich dann das folgende Beispiel an. Tauschen Sie einfach die Reihenfolge der Farbattribute im CSS-Stil aus, und der HTML-Codeteil bleibt unverändert.

CSS

#Box {

Farbe: blau;

Farbe: rot !wichtig;

Polsterung: 30px;

Breite: 300px;

Rahmen:1px einfarbig rosa;

}

In diesem Fall also, ob es sich um IE-Browsing Under handelt Bei der Erkennung von Browsern und Nicht-IE-Browsern wird die Schriftfarbe rot angezeigt. Obwohl der IE-Browser !important nicht erkennt, erkennt er die Farbe:red im Satz „color: red !important;“. Daher erkennt der Browser unter IE zuerst „Farbe: Blau“ und erkennt dann die Farbe: Rot in „Farbe: Rot! Wichtig;“ und deckt somit die vorherige „Farbe:

Blau“ ab Am Ende wird die Schriftfarbe als Rot angezeigt.