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

Posted 2023-03-06

【中文标题】不覆盖原始样式的媒体查询样式

【英文标题】：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% 的原始宽度。

【参考方案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://***.com/a/19038303/15394464

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