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

Question

所以，例如，如果我有一个媒体查询，还有一些常规的CSS与！important规则的东西，它会受到影响吗？

例如：

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

Answer 1

媒体查询和@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内联样式的!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）。如果它与媒体查询不匹配，那么只有第一条规则会产生任何影响，如上所述。

Answer 2

是。通常，如果您需要使用!important，则可以在代码中改进某些内容。在这里，您可以看到它覆盖了媒体查询的更改：JS Fiddle

如果您从代码中删除!important，则媒体查询按设计运行：JS Fiddle working properly

---

建议阅读何时使用!important：
When Using !important is The Right Choice

Answer 3

通常，当您使用！important 时，这表示CSS规则未按照您希望的方式运行-由于与其他规则或样式（内部或外部）冲突。 ！important通常（但不总是）是一种快速修复方法。专业人士会使用吗？每时每刻。例如，在Bootstrap 4中，“ text-right”类的标记如下：

.text-right {
        text-align: right !important;
}

这非常适合阅读-意味着您知道文本将显示在屏幕的右侧，但是在移动视图中，如果您想以不同的方式对齐文本-这将是一个问题，因为媒体查询将不起作用。因此，如果您可以避免使用它-请执行。要么了解您正在应用的新样式为何不起作用的冲突，要么创建仅适用于该部分中特定元素的“受保护”样式。

看看jsfiddle here，让我知道是否有问题。

祝您编程愉快！