html - 媒体查询规则不优先

Question

所以我在一个网站上工作，遇到一个奇怪的媒体查询问题，一些规则被覆盖了。它用于模板，因此有一个基本的“框架”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;，但这看起来像是创可贴，而不是解决方案。

Answer 1

本质上，您的第二组 CSS 是“所有内容”的媒体查询，并且由于它位于最大宽度规则之后，因此它也将应用于最大宽度 800 像素的 View 。

我认为这些规则中的一些不应该在 800 像素以下应用是正确的吗？如果是这样，将它们放在最小宽度规则中，然后它们将不会被使用。例如在 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;
        ...
    }
}