因此，例如，如果我有一个媒体查询以及一些带有！important规则的常规CSS，会受到影响吗？
例如：
a{
color:#0000FF!important;
}
@media (max-width: 300px){
a{
color:#FF0000;
}
}
媒体查询和@media规则不会!important以任何方式影响其行为，因为它们对级联的任何部分都没有任何影响。（通过扩展，这也意味着您不能使用@media规则来“删除”!important标志，即使您使用更具体的选择器也是如此。）
当您的媒体查询匹配时，浏览器将看到以下内容：
a{
color:#0000FF!important;
}
a{
color:#FF0000;
}
而如果没有，则会看到以下内容：
a{
color:#0000FF!important;
}
这两种情况都会导致第一个规则集具有优先权，但不会阻止例如!important具有更特定选择器的声明或!important内联样式覆盖它。
这是另一个更好地说明这一点的示例：
a{
color:#0000FF!important;
}
@media (max-width: 300px){
a:link,a:visited{
color:#FF0000!important;
}
}
匹配媒体查询后，浏览器将看到以下内容：
a{
color:#0000FF!important;
}
a:link,a:visited{
color:#FF0000!important;
}
这导致第二条规则具有优先权，因为它具有更具体的选择器（至少对于a与任一伪类匹配的元素而言）。如果与媒体查询不匹配，则仅第一个规则会产生任何效果，如上所述。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句