0

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

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

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

想法？提前致谢。

4

1 回答 1

2

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

button.css 中的 CSS 选择器：

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

mediaQuery.css 中的 CSS 选择器：

.ScopeToggle {...styles...}

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

于 2012-12-21T00:25:17.910 回答