!important规则是否会覆盖媒体查询？

Question

因此,举例来说,如果我有一个媒体查询,还有一些关于东西的重要规则的常规CSS,它会受到影响吗？

例如:

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

Answer 1

媒体查询和@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与伪类匹配的元素).如果它与媒体查询不匹配,那么只有第一个规则会产生任何影响,如上所述.