2012-06-22 10 views
46

Wenn SieKann ich inline überschreiben, wichtig?

<div style="display: none !important;"></div> 

Gibt es eine Möglichkeit, dass im Stylesheet außer Kraft zu setzen, damit es angezeigt?

Vorzugsweise etwas ähnliches wie dies mit:

div { display: block !important; } 
+2

Zum Überschreiben des 'display: block! Wichtig',' visibility: hidden; 'wird funktionieren. Jedenfalls nicht mit der Frage verbunden. Aber gedacht, um zu teilen. – SkyBuzz

Antwort

65

ich beginnen lassen, indem er sagt, dass allgemein Inline-Styles kann außer Kraft gesetzt werden:

.override {color:red !important;}​

<p style="color:blue;">I will be blue</p> 
<p style="color:blue;" class="override">But I will be red</p> 

Fiddled

Dieses Verhalten in W3 specs beschrieben wird, in dem es heißt, dass !important Deklarationen ändern die Spezifität nicht, sondern haben Vorrang vor über "normale" Deklarationen.

aber sagen, dass, wenn widersprüchliche Regeln haben sowohl die !important Flagge, diktiert Spezifität dass eine Inline-Regel angewendet wird - was bedeutet, dass Szenario für OPs, gibt es keine Möglichkeit ein Inline!important außer Kraft zu setzen.

+3

Das OP sagt eindeutig "inline! Wichtig" - bitte richtig lesen! Trotzdem +1 für eine gute Antwort. – Christoph

+1

@Christoph: aber die Antworten ebenso deutlich sagen "Sie können Inline-CSS nicht überschreiben", "Inline hat höhere Priorität" ... Das ist falsch daher die ursprüngliche Formulierung meiner Antwort.Ich erwarte nicht, dass jeder seine Antworten bearbeitet, um den Fehler zu korrigieren. –

+2

Ihre Antwort sagt nichts über das Überschreiben 'wichtiger 'Inline-Stile. Die Frage betrifft nur das Überschreiben 'wichtiger 'Inline-Styles. – BoltClock

19

Sie können keine Inline-CSS außer Kraft setzen, wenn es !important hat. Es hat eine höhere Priorität als der Stil in Ihrer externen CSS-Datei.

Wenn Sie jedoch später einige Aktionen ändern möchten, können Sie ein wenig JavaScript verwenden.

+1

Kann Javascript nicht verwenden, es ist für E-Mails. –

5

Sie können den Inline-Stil mit !important nicht überschreiben. Die erste Präferenz ist der Inline-Stil.

Für zB: Wir haben eine Klasse

.styleT{float:left;padding-left:4px;width:90px;} 

und in jsp

<div class="styleT" id="inputT" style="padding-left:0px;"> 

hier nicht findet die padding-left:4px; .Es Klasse nimmt styleT mit Ausnahme der padding-left: 4px ;. Es wird padding-left:0px; sein.

5

Sie können Inline-CSS mit !important nicht überschreiben, da es eine höhere Priorität hat, aber mit JavaScript können Sie erreichen, was Sie wollen.

+0

danke für die Bearbeitung, jetzt ist es richtig –

1

Hier ist eine einfache jQuery-Lösung.

$(document).ready(function() { 
$('div').css('display','block'); 
}) 
Verwandte Themen