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

Question

想象一下……</p>

@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