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

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%的原始宽度.

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;
    }
}

Answer 2

我已经至少 2 个小时试图找到覆盖 CSS 问题，直到我发现我的行注释错误......而 CSS 的第二个定义不起作用：

所以，不要像我一样愚蠢！：

/* LITTLE SCREENS */ 

@media screen and (max-width: 990px) {
    ... whatever ...
}

/*  BIG SCREENS */ 

@media screen and (min-width: 990px) {
    ... whatever more ...
}

从不使用：像我一样的双杠：

// This is not a comment in CSS!

/* This is a comment in CSS! */

Answer 3

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