! Önemli kural medya sorgularını geçersiz kılar mı?

Question

Örneğin, bir medya sorgusu olsaydı ve bazı önemli CSS öğelerini içeren bazı normal CSS'lerim etkilenir mi? Örneğin

:

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

Answer 1

Medya sorguları ve @media kuralları they do not have any effect on any part of the cascade çünkü herhangi bir şekilde !important davranışını etkilemez.

Medya sorgu eşleştirilir

, tarayıcı bunu görür (. Ek olarak, bu aynı zamanda daha spesifik seçici kullansalar bile, you cannot use a @media at-rule to "remove" an !important flag anlamına gelir):

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

Ve bu yaptığında, bunu Bu görür:

a{ 
    color:#0000FF!important; 
} 

Her iki dava öncelik alarak birinci ruleset sonuçlanır ancak engellemez, örneğin, bir !important daha spesifik bir seçicinin veya !important satır içi stili ile beyannamesi, onu geçersiz kılma. İşte

göstermektedir başka bir örnek bunu daha iyi:

medya sorgusu eşleştirilir

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

, tarayıcı bunu görür:

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

Bu da çünkü öncelik alarak ikinci kural sonuçlanır daha spesifik seçici (en az a elements that match either pseudo-class için). Medya sorgusuyla eşleşmezse, yalnızca ilk kuralın yukarıdaki gibi herhangi bir etkisi olur.

Answer 2

Evet. Tipik olarak !important'u kullanmanız gerekiyorsa, kodunuzda bir şey geliştirilebilir. Burada, medya sorguları değişim geçersiz olduğunu görebilirsiniz: Eğer !important form kodları kaldırırsanız JS Fiddle

, medya sorgusu tasarlandığı gibi çalışır: JS Fiddle working properly

---

!important ne zaman kullanılacağı hakkında okuma Tavsiye :
When Using !important is The Right Choice