Question

当屏幕尺寸低于一定数量的像素时，我试图隐藏div：

<div id="messageLeftToto" style="width:450px;height:570px;border:4px solid #000;box-sizing:border-box;display:block;
    position: absolute;
    right: 0px;
    top: 110px;">
</div>

 <style>
     @media (max-width :960px) {#messageLeftToto {display:none}
 </style>

但元素始终可见！

Answer 1

内联样式始终覆盖预定义或包含的样式（不包括定义为!important的样式 - 但如果可以，请避免使用!important）

一个简单的规则。例如，这将起作用：

#messageLeftToto  {
    width: 450px;
    height: 570px;
    border: 4px solid #000;
    box-sizing: border-box;
    display: block;
}
@media (max-width :960px) {
    #messageLeftToto {display:none}
}

最好不要使用内联样式，如果必须，可以使用!important进行覆盖，但是您将拥有一个充满!important的样式表。如果javascript正在改变你的样式，最好更改元素的类并将样式添加到CSS中。

Answer 2

在这种情况下，您需要使用important来覆盖内联样式。

@media (max-width :960px) {#messageLeftToto {display:none !important}}

http://jsfiddle.net/sxm4967s/

或将内联样式移动到样式表中。

#messageLeftToto {
    width:450px;
    height:570px;
    border:4px solid #000; 
    box-sizing:border-box;
    display:block;
    position: absolute;
    right: 0px;
    top: 110px
}

@media (max-width :960px) {#messageLeftToto {display:none }}

http://jsfiddle.net/sxm4967s/1/

display：block不能在max-width上工作

2 个答案: