Überwiegt die! Wichtige Regel Medienabfragen?

Question

Also, zum Beispiel, wenn ich eine Medienabfrage und auch einige reguläre CSS mit der! Wichtigen Regel auf Sachen hätte, wäre es betroffen?

Zum Beispiel:

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

Answer 1

Medienanfragen und @media Regeln, weil they do not have any effect on any part of the cascade:. (Durch die Erweiterung, bedeutet dies auch, you cannot use a @media at-rule to "remove" an !important flag, auch wenn Sie einen spezifischeren Selektor verwenden.)

Wenn Sie Ihre Medien-Abfrage abgestimmt wird, sieht der Browser diese:

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

Und wenn es funktioniert, ist es nicht dies sieht:

a{ 
    color:#0000FF!important; 
} 

beiden Fälle im ersten ruleset Vorrang führen, aber nicht verhindern, beispielsweise eine !important Erklärung mit einer spezifischeren Selektor oder einem !important Inline-Stil, aus zwingendem es.

Hier ist ein weiteres Beispiel, das veranschaulicht dies besser: dieser

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

Wenn die Abfrage Medien abgestimmt wird, sieht der Browser:

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

Dies führt in der zweiten Regel Vorrang zu nehmen, weil es eine hat spezifischerer Selektor (mindestens für a elements that match either pseudo-class). Wenn es nicht mit der Medienabfrage übereinstimmt, hat nur die erste Regel irgendeine Wirkung, wie oben.

Answer 2

Ja. Normalerweise, wenn Sie !important verwenden müssen, kann etwas in Ihrem Code verbessert werden. Hier können Sie sehen, dass es überschreibt die Änderung Medien-Anfragen: JS Fiddle

Wenn Sie !important Form entfernen Sie den Code ein, arbeitet die Medienabfrage als entworfen: JS Fiddle working properly

---

Empfohlene Lektüre auf, wenn !important zu verwenden nicht das Verhalten von !important in irgendeiner Weise beeinflussen
When Using !important is The Right Choice