媒体查询样式不覆盖原始样式 [英] Media Query Styles Not Overriding Original Styles

问题描述

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

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

MEDIA QUERY CSS
$ b

  @media screen和（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并选择该元素。但

解决方案

div>

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

I'm attempting to use some media queries for a website I'm building. The problem I'm having however, is while the media query styles are actually being applied, they're being overridden. I can't for the life of me tell why because I'm using the same exact selectors. Can anyone point out something that I'm not seeing?

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

MEDIA QUERY CSS

@media screen and (max-width:1024px) {
    #global-wrapper-outer > #global-wrapper-inner {
        width: 100%;
    }
    #global-wrapper-outer > #global-wrapper-inner > nav {
        display: none;
    }
}

The second media query is working fine, where I set the nav to have a display of none. However, when I try to set the width of #global-wrapper-inner to 100% it doesn't apply. I can see the style being "applied" when I press F12 and select that element. However, the style itself is crossed out and not actually applied and it still has the original width of 85%.

解决方案

The selectors in your original CSS have the same specificity as the selectors within your media queries (the first declarations are also targeting the same property - width) and because the media query rule set is being overridden I'm going to assume that it appears before the original rule set.

The second media query selector works because it's targeting a property that wasn't set in your original CSS, so specificity isn't relevant.

To have the first media query selector take precedence, prepend an ancestor element to it:

@media screen and (max-width:1024px) {
    body #global-wrapper-outer > #global-wrapper-inner {
         width: 100%;
    }
    #global-wrapper-outer > #global-wrapper-inner > nav {
        display: none;
    }
}

这篇关于媒体查询样式不覆盖原始样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！