媒体查询规则没有优先

所以我正在一个网站上，有一个奇怪的问题与媒体查询，一些规则被覆盖。这是一个模板，所以有一个基础的'框架'CSS，然后是另一个模板特定的CSS文件。为了清楚起见，这是我的HTML指令文件媒体查询规则没有优先

<link href="/themes/Base/base.min.css" rel="stylesheet" type="text/css"> <!-- Contains all of the base rules, including the base mobile rules--> 
<link href="/themes/MyTheme/theme.min.css" rel="stylesheet" type="text/css"> <!-- Contains all of the theme specific overrides-->

在base.min.css我有这些规则：

@media all and (max-width: 800px) { 
.... 
#menu { 
position: relative; 
width: 100%; 
min-height: auto; 
margin: 0px; 
padding: 0px; 
top: 0px; 
right: 0px; 
text-align: center; 
border-bottom-width: 1px; 
border-bottom-style: solid; 
border-top-width: 1px; 
border-top-style: solid; 
background-image: none; 
} 
....

在 theme.min.css文件，后进来的HTML文件

然后，我有这些规则

.... 
#menu { 
box-sizing: border-box; 
text-align: left; 
padding: 10px; 
min-height: 320px; 
width: 300px; 
box-shadow: 0 0 5px #000000; 
position: relative; 
margin: -20px 0 0 0; 
z-index: 100; 
background-position: bottom right; 
background-repeat: no-repeat; 
background-image: url(/themes/global/images/watermarks/watermark9.png); 
} 
....

请注意，第二组规则不包含在媒体查询中。尽管如此，其中的大部分规则都凌驾了以前的规则。高度，宽度，背景图像等我假设媒体查询的人会优先考虑，如果一切都相同（尽管晚些时候）由于增加的特异性。我的意思是，如果需要的话，我可以在那边拍一大堆!important;，但那看起来像是一个皮带，而不是解决方案。

来源

2016-03-22 Taylor Huston

简单的解决方案：将媒体查询放在底部，以便它们覆盖默认值。最后一条规则总是优先。还要确保在顶部有''“。 – michael

媒体查询位于框架CSS文件的底部，但该文件位于HTML中的其他CSS文件之前。查看我刚刚编辑的内容。 –

本质上，你的第二套CSS是“一切”的媒体查询，并且它是在最大宽度规则之后，它也将应用于最大宽度800px视图。

我是否正确地认为这些规则中的一些不应该在800px下应用？如果是这样，把它们放在一个最小宽度的规则，然后他们将不会被使用。例如在theme.css中：

#menu { 

    /*Put rules for any width in here*/ 

}  

@media all and (min-width: 801px) { 
    #menu { 
     /*Put rules you don't want inherited by max 800 in here*/ 
     min-height: 320px; 
     width: 300px; 
     ... 
    } 
}

来源

2016-03-23 09:58:15 KevAdamson

媒体查询规则没有优先

回答

相关问题