正在覆盖CSS媒体查询样式

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

所以，我有一个带有class.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)" />

在mediaQuery.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);
}

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

问题是，当我在chrome的开发工具中看到这一点时，媒体查询样式会被拾取并显示在“样式”窗格中，但会被划掉（以显示它们已被buttons.css样式覆盖）。

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

---

想法？提前感谢。

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

buttons.CSS中的CSS选择器：

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

mediaQuery.CSS中的CSS选择器：

.ScopeToggle {...styles...}

因此，在mediaQuery.css选择器中添加“#MainContainer”使其占据优势并解决了问题。