2012-06-22 13 views
46

JeśliCzy mogę zastąpić inline! Important? Important?

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

Czy istnieje sposób aby przesłonić że w arkuszu stylów, aby wyświetlać go?

Korzystnie użyciu coś podobnego do tego:

div { display: block !important; } 
+2

W celu przesłonięcia 'display: block! Important',' visibility: hidden; 'będzie działać. W każdym razie nie związane z pytaniem. Ale myślałem, że się podzielimy. – SkyBuzz

Odpowiedz

65

Zacznę od stwierdzenia, że ​​ogólnie inline style może być nadpisane:

.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

Takie zachowanie jest opisane in W3 specs, gdzie jest powiedziane, że !important deklaracje nie zmieniają specyfiki, lecz raczej mają pierwszeństwo nad "normalnymi" deklaracjami.

W takiej sytuacji, gdy przepisy sprzeczne zarówno mieć flagę !important, swoistość mówi, że reguła jest stosowana inline - co oznacza, że ​​dla scenariusza OP, nie ma sposobu, aby przesłonić inline!important.

+3

PO wyraźnie stwierdza "inline! Important" - przeczytaj proszę! Niemniej +1 za dobrą odpowiedź. – Christoph

+1

@Christoph: ale odpowiedzi tak samo jasno stwierdzają "nie możesz przesłonić wbudowanego CSS", "wbudowany ma wyższy priorytet" ... To jest złe stąd oryginalna fraza mojej odpowiedzi.Nie oczekuję, że wszyscy edytują swoje odpowiedzi, aby poprawić błąd. –

+2

Twoja odpowiedź nie mówi nic o przesłonięciu stylów wbudowanych '! Important'. Pytanie dotyczy tylko nadpisania stylów "! Important" inline. – BoltClock

19

Nie można zastąpić inline CSS, jeśli ma !important. Ma wyższy priorytet niż styl w zewnętrznym pliku CSS.

Jeśli jednak chcesz później zmienić niektóre akcje, możesz użyć trochę JavaScript.

+1

Nie można używać javascript, jest to dla wiadomości e-mail. –

5

Nie można zastąpić stylu inline posiadającego !important. Pierwsza preferencja to styl inline.

Np: mamy klasy

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

i JSP

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

tutaj nie podejmują padding-left:4px; .To trwa klasę styleT wyjątkiem padding-left: 4px ;. Pojawi się padding-left:0px;.

5

Nie można zastąpić wbudowanego CSS posiadającego !important, ponieważ ma wyższy priorytet, ale używając JavaScript, możesz osiągnąć to, co chcesz.

+0

dziękuję za edycję, teraz jest poprawna –

1

Oto proste rozwiązanie jQuery.

$(document).ready(function() { 
$('div').css('display','block'); 
}) 
Powiązane problemy