Was bedeutet! Wichtig in CSS?

409

Was !importantbedeutet in CSS?

Ist es in CSS 2 verfügbar? CSS 3?

Wo wird es unterstützt? Alle modernen Browser?

css Itay Moav-Malimovka
quelle
2
w3.org/TR/CSS2/cascade.html#important-rules
j08691
17
... etwas zu vermeiden, wann immer es möglich ist.
Scott
2
mögliches Duplikat von Wie liest du! wichtig in CSS? , Welche Auswirkungen hat die Verwendung von "! Important" in CSS? und auch sehen: wann zu verwenden! wichtige Eigenschaft in CSS? , Wann man "! Important" verwendet, um den Tag zu retten (wenn man mit CSS arbeitet)
Cody Gray

Antworten:

400

Es bedeutet im Wesentlichen, was es sagt; "Dies ist wichtig, ignorieren Sie nachfolgende Regeln und alle üblichen Spezifitätsprobleme, wenden Sie diese Regel an!"

Bei normaler Verwendung wird eine in einem externen Stylesheet definierte Regel durch einen im headDokument definierten Stil außer Kraft gesetzt , der wiederum durch einen Inline-Stil innerhalb des Elements selbst außer Kraft gesetzt wird (unter der Annahme der gleichen Spezifität der Selektoren). Durch das Definieren einer Regel mit dem !importantAttribut '(?) Werden die normalen Bedenken hinsichtlich der' späteren 'Regel verworfen, die die' früheren 'Regeln überschreibt.

Normalerweise überschreibt eine spezifischere Regel auch eine weniger spezifische Regel. Damit:

a {
    /* css */
}

Wird normalerweise außer Kraft gesetzt von:

body div #elementID ul li a {
    /* css */
}

Da der letztere Selektor spezifischer ist (und es normalerweise keine Rolle spielt, wo sich der spezifischere Selektor befindet (im headoder im externen Stylesheet), überschreibt er immer noch den weniger spezifischen Selektor (Inline-Stilattribute werden immer verwendet) Überschreiben Sie den spezifischen Selektor "mehr" oder "weniger", da er immer spezifischer ist.

Wenn Sie jedoch !importantdie CSS-Deklaration des weniger spezifischen Selektors ergänzen , hat diese Priorität.

Das Verwenden !importanthat seine Zwecke (obwohl ich Schwierigkeiten habe, an sie zu denken), aber es ähnelt dem Verwenden einer nuklearen Explosion, um zu verhindern, dass die Füchse Ihre Hühner töten. Ja, die Füchse werden getötet, aber auch die Hühner. Und die Nachbarschaft.

Es macht das Debuggen Ihres CSS auch zu einem Albtraum (aus persönlicher, empirischer, Erfahrung).

David sagt, Monica wieder einsetzen
quelle
253
Es ist auch für viele Entwickler verwirrend, da in vielen Programmiersprachen das Präfix! bedeutet nicht .
Rustyx
19
Ein Zweck für! Wichtig wäre ein GreaseMonkey-Skript, in dem Sie absichtlich das CSS anderer Personen überschreiben, das wahrscheinlich spezifischer ist als das Ihre.
Noumenon
1
Offiziell nennt es der W3 eine "Regel".
JD Smith
5
Zumindest ist es nicht sarkastisch und sagt important!(wichtig NICHT)
user3553260
2
Sie haben geschrieben: "Bei normaler Verwendung wird eine in einem externen Stylesheet definierte Regel durch einen im Kopf des Dokuments definierten Stil außer Kraft gesetzt." Es ist falsch.
Jlguenego
130

Die! Wichtige Regel ist eine Möglichkeit, Ihre CSS-Kaskade zu erstellen, aber es müssen auch immer die Regeln angewendet werden, die Ihrer Meinung nach am wichtigsten sind. Eine Regel mit der Eigenschaft! Important wird immer angewendet, unabhängig davon, wo diese Regel im CSS-Dokument angezeigt wird.

Also, wenn Sie Folgendes haben:

.class {
   color:red !important;
}
.outerClass .class {
   color:blue;
}

Die Regel mit dem Wichtigen ist die angewandte (ohne Berücksichtigung der Spezifität ).

Ich glaube, !importantin CSS1 erschienen, so dass jeder Browser es unterstützt (IE4 bis IE6 mit einer Teilimplementierung, IE7 + voll)

Es ist auch etwas, das Sie nicht oft verwenden möchten, denn wenn Sie mit anderen Personen arbeiten, können Sie andere Eigenschaften überschreiben.

nicosantangelo
quelle
1
IE4 +, eigentlich mit Fehlern, bis einschließlich 6.
BoltClock
15
Die Verwirrung tritt auf, da dies !in einigen Sprachen ein Symbol für NICHT ist, aber jetzt ist es klarer.
Si8
2
Ich bin besonders froh, dass Sie die Syntax für die Verwendung angegeben haben !important. CSS unterscheidet sich genug von anderen Sprachen, so dass man leicht vergisst, wie man bestimmte Dinge benutzt.
Blainarmstrong
3
@ Si8 - Ja, wegen dieser Verwirrung habe ich immer gedacht, "sie" hätten es eher als important!oder vielleicht IMPORTANT!als definieren sollen !important. Ich frage mich, ob jemand (der das vielleicht liest) weiß, warum er es mit der Interpunktion vor definiert hat. Offensichtlich ist es viel zu spät, um es jetzt zu ändern.
Kevin Fegan
22

!important ist ein Teil von CSS1.

Browser, die dies unterstützen: IE5.5 +, Firefox 1+, Safari 3+, Chrome 1+.

Es bedeutet so etwas wie:

Verwenden Sie mich, wenn es sonst nichts Wichtiges gibt!

Kann es nicht besser sagen.

Zyklon
quelle
5
!importantist nicht nur auf Safari 3+ beschränkt; Es hat es von Anfang an wie alle anderen Nicht-IE-Browser unterstützt. IE versteht es ab Version 4, unterstützt es jedoch nur ab Version 7
fehlerfrei
12

Es wird verwendet, um die Sortierung in der CSS-Kaskade zu beeinflussen, wenn die Sortierung nach Ursprung erfolgt. Es hat nichts mit Spezifität zu tun, wie hier in anderen Antworten angegeben.

Hier ist die Priorität vom niedrigsten zum höchsten:

  1. Browser-Stile
  2. User Style Sheet Deklarationen (ohne! wichtig)
  3. Autoren-Stylesheet-Erklärungen (ohne! wichtig)
  4. ! Wichtige Autoren-Stylesheets
  5. ! wichtige User Style Sheets

Danach erfolgt die Spezifität für die Regeln, die noch einen Finger im Kuchen haben.

Verweise:

Fabian Barney
quelle
Wie @ fabian-barney hervorhob, !importanthandelt es sich um einen Modifikator für die kaskadierende Reihenfolge developer.mozilla.org/en-US/docs/Web/CSS/Cascade (siehe Tabelle als Referenz).
Doomjunky