媒体查询不覆盖原始显示样式答案

【问题标题】：Media query NOT overriding original display styling媒体查询不覆盖原始显示样式
【发布时间】：2014-06-30 11:06:33
【问题描述】：

我有一个移动菜单设置为在加载时不显示，然后在媒体查询中将其设置为显示块。

我过去一直这样做，但没有任何问题。但是这不起作用。

在 Firefox 检查器中检查时，我可以看到 css 媒体查询被标准 css 覆盖。知道为什么吗？

小提琴：

备份代码：

    <nav class="header-nav">
        <ul id="nav">
            <li><a href="#homepage-gallery" class="scroll">Gallery</a></li>
            <li><a href="#homepage-about" class="scroll">About</a></li>
            <li><a href="#homepage-contact" class="scroll">Contact</a></li>
            <li><a href="#homepage-loyalty" class="scroll">Loyalty Card</a></li>
        </ul>
    </nav>

    <div class="header-nav-mobile">
        Menu
    </div>

@media only screen 
and (min-width : 320px) 
and (max-width : 568px) {

.header-nav-mobile {
    display: block;
}

#nav {
    display: none;
}

}

.header-nav-mobile {
    float: right;
    line-height: 40px;
    width: 60px;
    height: 40px;
    text-align: center;
    color: #fff;
    background-color: #404040;
    cursor: pointer;
    display: none;
}

【问题讨论】：

媒体查询应该在默认状态之后定义。否则，它只会被文件后面的默认状态覆盖。

标签： html css media-queries

【解决方案1】：

尝试将媒体查询放在默认 css 代码下方，如下所示：

.header-nav-mobile {
    float: right;
    line-height: 40px;
    width: 60px;
    height: 40px;
    text-align: center;
    color: #fff;
    background-color: #404040;
    cursor: pointer;
    display: none;
}
@media only screen 
and (min-width : 320px) 
and (max-width : 568px) {
  .header-nav-mobile {
      display: block;
  }
  #nav {
      display: none;
  }
}

工作小提琴：http://jsfiddle.net/25zJX/1/

【讨论】：

【解决方案2】：

@mediaquery 放错了位置，在底部剪切粘贴。

【讨论】：