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的开发工具中看到这个时，媒体查询样式被拾取并显示在“样式”窗格中，但是被划掉（以表明它们已被覆盖了buttons.css styles）。

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

思考？提前谢谢。

Answer 1

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

buttons.css中的CSS选择器：

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

mediaQuery.css中的CSS选择器：

.ScopeToggle {...styles...}

因此，将'#MainContainer'添加到mediaQuery.css选择器会使其占据主导地位并解决问题。

CSS媒体查询样式被覆盖

1 个答案: