2010-01-11 2 views
10
#div p { 
    color: red !important; 
} 
... 
#div p { 
    color: blue; 
} 

Ich verstehe, wie !important Werke, in diesem Fall die div rot machen, weil es jetzt Priorität hat (! Wichtig). Aber ich kann immer noch keine geeignete Situation finden, um es zu benutzen. Kennt jemand ein Beispiel, wo !important den Tag rettet?Wann verwendet man „! Important“, um den Tag zu retten (wenn Arbeit mit CSS)

+0

mögliche Duplikate von [Was sind die Auswirkungen der Verwendung von "! Wichtig" in CSS?] (Http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in- css) – Gilles

Antwort

15

Bedenken Sie:

#someElement p { 
    color: blue; 
} 

p.awesome { 
    color: red; 
} 

Wie Sie awesome Absätze immer rot werden, auch solche innerhalb #someElement machen? Ohne !important wird die erste Regel mehr Spezifität haben und die zweite Regel gewinnen.

+1

p.awesome {..} funktioniert das in IE6? –

+0

@JitendraVyas: Sortieren von. Es gibt seltsame Regeln dafür, wie IE6 mit "! Wichtig" umgeht.Glücklicherweise, seit 2012 oder so, ist IE6 ziemlich irrelevant und alle anderen Browser, die ich kenne, tun es richtig. – cHao

+0

und auf jeden Fall ja, IE6 behandelt das gut. Es erstickt irgendwie, wenn man Klassenselektoren wie 'p.foo.bar' kombiniert. – nickf

3

!important speichert den Tag in Fällen, in denen Sie HTML-Ausgabe nicht steuern und es ein style=''-Attribut rendert. Denken Sie an ASP.NET und andere Frameworks.

Sie können dieses Styling nur ändern, indem Sie entweder Javascript verwenden oder Ihre CSS-Regel als wichtiger markieren.

1

Außerdem wird !important in IE6/7 ignoriert. So können Sie es als IE6/7 hack verwenden.

+2

! Wichtig wird jedoch nicht vollständig ignoriert (d. H. In der Situation, die ich gepostet habe). Wahrscheinlich gut zu bemerken. –

0

Wenn Ihre Seite mehrere CSS-Dateien, das von Ihnen geschriebene CSS und zusätzliche CSS enthält, die mit von anderen Parteien geschriebener Software geliefert werden, möchten Sie vielleicht etwas von Ihrem CSS als "garantiert" markieren, das nicht überschrieben wird CSS aus anderen eingeschlossenen Dateien.

0

Verwenden Sie nicht die! Wichtige Deklaration, es sei denn, Sie haben zuerst alles andere versucht, und beachten Sie etwaige Nachteile. Wenn Sie es verwenden, ist es wahrscheinlich sinnvoll, wenn möglich, einen Kommentar in Ihr CSS neben allen Stilen einzufügen, die außer Kraft gesetzt werden, um eine bessere Code-Wartbarkeit zu gewährleisten.

11

Nur als letzter Ausweg! Dies liegt daran, dass es einmal schwer ist, es zu überschreiben. Meine Faustregeln:

  • Nie Einsatz wichtig vor Ort weiter CSS!.
  • Nur Wichtig! Bei seitenspezifischen CSS, die siteweite oder fremde CSS überschreiben (z. B. von ExtJs oder YUI).
  • Nie verwenden, wichtig, wenn Sie ein Plugin/Mashup schreiben.
  • immer Look für eine Art und Weise Spezifität zu verwenden, bevor auch unter Berücksichtigung! Important
1

! Wichtig ist nützlich, wenn Sie mit jemand anderem Code arbeiten und kann einen Effekt einfach nicht außer Kraft setzen durch spezifischere Selektoren . Wenn ich gebeten werde, eine Seite oder einen kleinen Satz von Seiten zu einer bestehenden Seite hinzuzufügen, muss ich die vorhandenen Stylesheets hinzufügen, kann sie aber nicht bearbeiten (entweder wegen fehlendem Zugriff oder wegen der Trickle-Down-Funktion) Effekt würde andere Dinge brechen), das ist wo wichtig ist wichtig. Andernfalls sollten Sie die Selektorspezifität verwenden, um das Verhalten zu überschreiben.

Verwandte Themen