css - 媒体查询 CSS 重要

Question

制作响应式网站，

我写了这个，它不起作用。

@media (max-width: 767px) {
    #nav { display:block; }
}

但是，我写了这个，它有效！

@media (max-width: 767px) {
    #nav { display:block !important; }
}

为什么？:(

Answer 1

!important将覆盖任何内联样式，或更具体的可能在您的页面上优先的样式。

例如，您可以覆盖此元素的样式...

<div style='background-color:white'></div>

通过在您的样式表中添加它...

div { background-color: black !important }

但是！，如果您添加!important到内联样式，它将优先，例如...

<div style='background-color:white !important'></div>

这是一个很好的stackoverflow答案，更详细地解释了这个概念。

Answer 2

检查您的 css 代码，具有更高特异性的东西正在改变您的 #nav 元素。

Answer 3

这是一个小概念：

!important在 style 属性赋予该样式高优先级之后。这就是为什么你的 CSS 正在工作的原因。 !important覆盖在相同上下文中定义的现有样式表属性。