不覆盖原始样式的媒体查询样式

Question

我正在尝试对我正在构建的网站使用一些媒体查询。然而，我遇到的问题是，在实际应用媒体查询样式时，它们被覆盖了。我一生都无法说出原因，因为我使用的是相同的选择器。谁能指出我没有看到的东西？

原始 CSS

 #global-wrapper-outer > #global-wrapper-inner {
    width: 85%;
    height: 100%;
    margin: 0 auto;
    position: relative;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
    background: #fff;
    padding-bottom: 20px;
    box-shadow: 0 4px 2px -2px gray;
}

媒体查询 CSS

 @media screen and (max-width:1024px) {
    #global-wrapper-outer > #global-wrapper-inner {
        width: 100%;
    }
    #global-wrapper-outer > #global-wrapper-inner > nav {
        display: none;
    }
}

第二个媒体查询工作正常，我将导航设置为无显示。但是，当我尝试将 #global-wrapper-inner 的宽度设置为 100% 它不适用。当我按 F12 并选择该元素时，我可以看到样式正在“应用”。但是，样式本身被划掉了，并没有 实际 应用，它仍然具有 85% 的原始宽度。

原文由 Ben Black 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

原始 CSS 中的选择器与媒体查询中的选择器具有相同的 特异性（第一个声明也针对相同的属性 - width ）并且因为媒体查询规则集被覆盖，所以我要去假设它出现 在 原始规则集之前。

第二个媒体查询选择器之所以有效，是因为它针对的是原始 CSS 中未设置的属性，因此不相关。

要让第一个媒体查询选择器优先，请在其前面添加一个祖先元素：

 @media screen and (max-width:1024px) {
    body #global-wrapper-outer > #global-wrapper-inner {
         width: 100%;
    }
    #global-wrapper-outer > #global-wrapper-inner > nav {
        display: none;
    }
}

原文由 Adrift 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您需要链接媒体查询文件 (queries.css)，晚于普通的 css 文件 (style.css)。这样 queries.css 中的规则将覆盖 style.css 中的规则。

原文由 Sameer Khanal 发布，翻译遵循 CC BY-SA 3.0 许可协议