媒体查询不工作显示：无显示：内联

Question

我有一个简单的html如下

<div id="break" style="display:none">
 <br />
</div>

我试图在用户减小窗口大小时显示该中断。我正在使用css3媒体查询。我尝试如下

@media only screen and (max-height :510px){

    #break
    {
        display:inline;
    }
}

但是Break没有出现。我遗失了什么？

Answer 1

您正在应用display：none;通过内联HTML样式（style =“display：none”）。默认情况下，CSS不会覆盖内联样式。为了让CSS覆盖内联样式，请使用！important;声明：

@media only screen and (max-height :510px) {
    #break
    {
        display:inline !important;
    }
}

这是fiddle。

Answer 2

您可以首先将display none放入外部样式表而不是内联样式，它将覆盖您的CSS属性。

Answer 3

这是由于style属性的特殊性。这是CSS2规范中的一个句子（更具体地说：specificity section）：

  

“style”属性中的声明将覆盖STYLE元素中的声明，因为它具有级联规则3，因为它具有更高的特异性。

不要对术语STYLE element感到困惑，这也包括来自外部样式表的CSS规则。

除了显示换行符之外，您只需将display: none;行放入CSS文件或<style>元素中即可。

#break
{
    display: none;
}

@media only screen and (max-height: 510px){

    #break
    {
        display: inline;
    }
}