覆盖！媒体查询中的重要规则集？！不重要？答案

【问题标题】：Overwrite !important rule set within media-query? !unimportant?覆盖！媒体查询中的重要规则集？！不重要？
【发布时间】：2012-09-30 00:43:27
【问题描述】：

想象一下……

@media screen and (min-width: 55.5em) {
    aside[role="attend"] {
        margin:0 !important;
    }
}

@media screen and (min-width: 61.5em) {
    aside[role="attend"] {
        margin:0; /* still !important but shouldn't be */
    }
}

是否有任何方法可以覆盖或“删除”!important 声明，使其不再应用于更高的 min-width 值？

【问题讨论】：

是的，不要使用!important，所以它不需要被覆盖。它被那些通常不了解 css 工作原理的人过度使用。不是真正的答案，因此是评论。
顺便说一句——我之前的评论并不是要暗示你不知道 CSS 是如何工作的。但是，我的意思是如果可能的话，通过重新配置该选择器或其他 css 来删除有问题的 !important。

标签： css media-queries

【解决方案1】：

没有；级联的工作方式，无法撤消 !important 声明或使其“不重要”。

这与规则是否出现在不同的@media 规则中或样式表中的任何其他位置无关。这意味着它就像您一开始就没有媒体查询一样：

aside[role="attend"] {
    margin:0 !important;
}

aside[role="attend"] {
    margin:0;
}

顺便说一句，如果min-width: 55.5em 和min-width: 61.5em 媒体查询都得到满足，浏览器实际看到的是什么。

你最好找到一种方法来删除 !important 并在你的第一个 @media 规则中使用更具体的选择器。

【讨论】：