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

【问题标题】：Media Query Styles Not Overriding Original Styles不覆盖原始样式的媒体查询样式
【发布时间】：2013-10-03 00:17:12
【问题描述】：

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

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

【问题讨论】：

标签： css media-queries

【解决方案1】：

原始 CSS 中的选择器与媒体查询中的选择器具有相同的 specificity（第一个声明也针对相同的属性 - 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;
    }
}

【讨论】：

就是这样。很高兴知道。非常感谢。现在问你一个问题，我是否将标记附加到它，然后稍后在另一个媒体查询中使用相同的特异性来说当它低于 768 像素时将其更改回 85% 宽度。它是否需要另一个祖先，还是因为您说媒体查询没有特异性，所以可以吗？
解决这个问题，我测试了它，它的工作方式和我想的一样。不需要增加特异性。再次感谢！
使用您的解决方案或在媒体查询中添加 !important 有什么区别？
有人能解释一下为什么你必须在它前面加上一个祖先元素吗？它必须是祖先元素还是可以是同一级别的元素？
您必须在其上添加祖先元素，因为该元素使其更加具体。你也可以做一个兄弟元素，它必须是使它比其他规则更具体的任何东西。这当然可以通过让媒体查询出现在非媒体 CSS 之后来解决。

【解决方案2】：

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

【讨论】：

这是正确的方法——因为它是最优雅的。
这对我来说是个问题。我有我的核心样式，然后是页面特定的移动样式，然后是页面普通样式，这是错误的顺序。设置为核心样式，页面样式然后页面移动样式完美运行。

【解决方案3】：

我至少花了 2 个小时试图找到覆盖 CSS 的问题，直到我发现我的线路 cmets 出了问题……而且 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! */

【讨论】：

是时候转向 SCSS 了 :)

【解决方案4】：

根据您提交的代码，这可能无法解决您的问题。但是，如果您将样式嵌套在另一个 CSS 中：

.main-container {
  .main {
    background: blue;
  }
}

由于嵌套，.main 的媒体查询将不起作用。从.main-container 中取出.main，然后媒体查询将按假设工作：

.main-container {

}

.main {
  background: blue;
}

【讨论】：

【解决方案5】：

检查您的媒体查询大括号是否相等。

有时它非常微妙，但是当您错过一个大括号时，针对某些断点提到的其余媒体查询将不起作用

示例：

@media(min-width: 768px) and (max-width: 991px){




@media (max-width: 767px){

    .navbar-brand p {
    
        font-size: .6em;
        margin-top: 12px;}
       
    .navbar-brand img {height: 20px;}   

    #collapsable-nav a {
        font-size: 1.2em;
    }    

    #collapsable-nav a span {
    font-size: 1.2em;}
}

在这里你可以看到我已经开始了 max-width:991px 的大括号，但忘记结束，所以媒体查询中 max-width:767px 的下一组代码将不起作用。这是一个非常简单的错误，但由于代码中有很多大括号，所以花了几个小时。希望能帮助到你。快乐编码！

【讨论】：

【解决方案6】：

使用!important 怎么样？如果您的媒体查询范围从( min-width: 176px ) 和( max-width: 736px ) 甚至到980px？

【讨论】：

使用!important 被高估了。这不是处理覆盖的好方法。

【解决方案7】：

这就是答案。（至少对我有用）

我以前也遇到过这个问题，我花了一段时间才意识到我做了什么，但是一旦我弄清楚它实际上很容易。

好吧，想象一下我有这个html

<main>
  <div class = "child1"> </div>
  <div class = "child2"> </div>
</main>

然后这是CSS

main .child1{
 height: 50px;
}

/* now let's try to use media quaries */


@media only screen and (max-width: 768px) {
   .child1{
     width: 75%;
   }
}

上面的代码不会影响 .child。就像上面提到的人一样，main .child1 覆盖.child1。所以你让它工作的方式是选择元素，就像我们在上面 CSS 的开头所做的那样。

/* this will work */


@media only screen and (max-width: 768px) {
   main .child1{
     width: 75%;
   }
}

因此，作为结论...每次都以相同的方式选择元素。含义...例如在上面的代码中，在您的 CSS 中，您应该在整个 CSS 中将其选择为 main .child1 或 .child1 ，否则它们会混淆，最终会覆盖另一个。

【讨论】：

【解决方案8】：

可能有一些原因会导致此类错误发生。我自己也遇到了这个问题，我无法理解我需要做什么并且很困惑，媒体查询是否只是覆盖了元素。这是我的理解：

媒体查询 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 > nav，即第二个媒体查询选择器，通过 display: none; 因为您从未在原始 css 中添加显示行，因此没有什么可以覆盖您只是给出了显示类型应该为无。而就在第一个媒体查询选择器中，您已经给出了 width:80%; 据我所知，基本上媒体查询不会覆盖，但它优先，就像其中一个已经解释过的那样媒体查询通过哪些方式起作用： https://stackoverflow.com/a/19038303/15394464

如果你的疑问还没有弄清楚，https://www.youtube.com/watch?v=acqN6atXVAE&t=288s 那么这可能会有所帮助。

【讨论】：