媒体查询CSS很重要

Question

制作自适应网站，

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

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

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

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

为什么呢？ ：（

Answer 1

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

Answer 2

这是一个小概念：

style属性为该样式赋予高优先级后

!important。这就是为什么你的CSS正在工作的原因。 !important覆盖在同一上下文中定义的现有样式表属性。

Answer 3

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

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

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

在样式表中添加...

div { background-color: black !important }

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

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

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