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

Question

想象一下......

@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值？

Answer 1

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

无论规则是在不同@media规则内还是在样式表中的任何其他地方发生，都是如此。这意味着它就像你开始时没有媒体查询一样：

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

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

顺便提一下，如果同时完成了min-width: 55.5em和min-width: 61.5em媒体查询，浏览器实际看到了什么。

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