因此,举例来说,如果我有一个媒体查询,还有一些关于东西的重要规则的常规CSS,它会受到影响吗？
例如：
a{
color:#0000FF!important;
}
@media (max-width: 300px){
a{
color:#FF0000;
}
}
解决方法
媒体查询和@media规则不会以任何方式影响！important的行为,因为
they do not have any effect on any part of the cascade.(通过扩展,这也意味着
you cannot use a
@media at-rule to “remove” an !important flag,即使您使用更具体的选择器.)
当您的媒体查询匹配时,浏览器会看到：
a{
color:#0000FF!important;
}
a{
color:#FF0000;
}
如果没有,它会看到：
a{
color:#0000FF!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 elements that match either pseudo-class).如果它与媒体查询不匹配,那么只有第一个规则会产生任何影响,如上所述.
