74

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

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

4

8 回答 8

121

原始 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;
    }
}
于 2013-09-26T20:41:38.037 回答
16

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

于 2017-11-13T07:08:13.913 回答
6

我已经至少 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! */
于 2014-05-13T07:49:45.890 回答
1

从您提交的代码来看，这可能无法解决您的问题。但是，在您的 CSS 中，如果您将样式相互嵌套：

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

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

.main-container {

}

.main {
  background: blue;
}
于 2020-06-11T01:46:31.983 回答
1

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

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

例子：

@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 的下一组代码将不起作用。这是一个非常简单的错误，但由于代码中有很多大括号，所以花了几个小时。希望能帮助到你。快乐编码！

于 2021-04-23T12:15:10.260 回答
0

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

于 2018-07-18T09:54:53.247 回答
0

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

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

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

于 2021-11-01T19:19:42.263 回答
0

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

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

好吧，想象一下我有这个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 中，您应该main .child1在整个 CSS中选择它，.child1否则它们会混淆，最终会覆盖另一个。

于 2021-07-26T03:07:12.727 回答