Czy ważna reguła zastępuje zapytania o media?

Question

Na przykład, gdybym miał zapytanie o media, a także jakiś zwykły CSS z ważną regułą na temat rzeczy, czy miałby na nią wpływ?

Na przykład:

a{ 
    color:#0000FF!important; 
} 
@media (max-width: 300px){ 
    a{ 
     color:#FF0000; 
    } 
} 

Answer 1

mediów zapytania i @media przepisy nie wpływają na zachowanie !important w jakikolwiek sposób, ponieważ they do not have any effect on any part of the cascade. (Przez rozszerzenie, oznacza to również you cannot use a @media at-rule to "remove" an !important flag, nawet jeśli użyć bardziej konkretnego wyboru.)

Kiedy zapytanie media są dopasowane, przeglądarka widzi to:

a{ 
    color:#0000FF!important; 
} 
a{ 
    color:#FF0000; 
} 

A jeśli nie, to widzi w tym:

a{ 
    color:#0000FF!important; 
} 

Oba przypadki wynikają w pierwszym zestawie reguł mającego pierwszeństwo, ale nie zapobiega, na przykład deklaracja !important z bardziej szczegółowym selektorem lub stylu !important inline, z nadrzędnymi go.

Oto kolejny przykład, który ilustruje to lepiej:

a{ 
    color:#0000FF!important; 
} 
@media (max-width: 300px){ 
    a:link,a:visited{ 
     color:#FF0000!important; 
    } 
} 

Gdy kwerenda media są dopasowane, przeglądarka widzi to:

a{ 
    color:#0000FF!important; 
} 
a:link,a:visited{ 
    color:#FF0000!important; 
} 

Wynika to w drugą zasadą nadrzędności ponieważ ma bardziej szczegółowy selektor (przynajmniej dla a elements that match either pseudo-class). Jeśli nie pasuje do zapytania o media, to tylko pierwsza reguła będzie miała jakikolwiek efekt, jak wyżej.

Answer 2

Tak. Zazwyczaj, jeśli potrzebujesz użyć !important, możesz poprawić coś w swoim kodzie. Tutaj można zobaczyć, że jest przesłanianie zmienić zapytań o media: JS Fiddle

Jeśli usuniesz !important forma kod, zapytanie mediów działa zgodnie z przeznaczeniem: JS Fiddle working properly

---

zalecanych lektur na kiedy używać !important :
When Using !important is The Right Choice