Question

我正在尝试对我正在构建的网站使用一些媒体查询。然而，我遇到的问题是，当媒体查询样式实际被应用时，它们被覆盖。我不能为我的生活告诉为什么，因为我使用相同的精确选择器。任何人都可以指出我没有看到的东西吗？

ORIGINAL 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中的选择器与媒体查询中的选择器具有相同的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; } }

Answer 2

您需要在正常的css文件（style.css）之后链接媒体查询文件（queries.css）。这样，queries.css中的规则将覆盖style.css中的规则。

Answer 3

我至少花了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 4

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

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

由于嵌套，无法对.main进行媒体查询。从.main中取出.main-container，然后媒体查询将按照假定的方式工作：

.main-container {

}

.main {
  background: blue;
}

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

Answer 6

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

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

好吧，想象一下我把它作为 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 否则它们会混淆，最终会覆盖另一个。

Answer 7

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

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

7 个答案: