CSS 媒体查询样式被覆盖

Question

我已经研究了一段时间的媒体查询相关问题，但还没有找到解决我的问题的方法。我确定这只是我忽略的一件小事，但出于某种原因我无法弄清楚。

因此，我有一个类为 .ScopeToggle 的按钮，我想针对纵向手机进行调整。我已经尝试了所有我能想到的不同方向，但这是我现在的做法:

在 HEAD 标签中:

<link rel="stylesheet" type="text/css" href="buttons.css" />
<link rel="stylesheet" type="text/css" href="mediaQuery.css" media="only screen and (max-width:340px)" />

在 buttons.css 样式表中:

#MainContainer .ScopeToggle
{
    position: absolute;
    right: 7px;
    width: 150px;
    height: 30px;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    list-style: none;
    font-size: 0.8em;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.3);
}

在 mediaQuery.css 样式表中:

.ScopeToggle
{
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 0;
    background: none;
    width: 75px;
}

问题是，当我在 chrome 的开发工具中查看时，媒体查询样式被拾取并显示在“样式” Pane 中，但被划掉了(以表明它们已被buttons.css 样式)。

当所有样式都写入文档的 HEAD 标记时，我没有遇到这个问题，但由于某种原因，这种抽象阻止了它按预期进行级联。我也试过将媒体查询直接放在样式表中，而不是 LINK 元素具有内联“媒体”属性，并且我已经将媒体查询放在按钮.css 下面它自己的 STYLE 标签中，但这都是一样的结果。

想法？提前致谢。

Answer 1

默认样式有一个 ID 前缀，而媒体查询的样式没有。

buttons.css 中的 CSS 选择器:

#MainContainer .ScopeToggle {...styles...}

mediaQuery.css 中的 CSS 选择器:

.ScopeToggle {...styles...}

因此，将“#MainContainer”添加到 mediaQuery.css 选择器使其具有主导地位并解决了问题。