Question

好的，我目前正在指导我的样式表，如下所示：

<link href="Styles/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" />  
<link href="Styles/Site.css" rel="stylesheet" type="text/css" media="screen"/>

在Site.css上我有一个带背景图像的ID：

#container { 
    width: 1000px;
    margin-left: auto;
    margin-right: auto; 
    background: url('../images/topbackground.gif') no-repeat;
}

在mobile.css上，我认为我可以简单地将其更改为“无”或其他图像，有点类似于此（我此时尝试了几种变体）：

#container {
    width: 100%;
    margin-left: 0;
    margin-right: 0; 
    background: #ffffff none;
    z-index: 30;
}

然而，它似乎没有起作用。背景仍然显示在该网站的移动版本上。我一直在Opera Mini和Android SDK模拟器中看它。该网站的移动版本正在从mobile.css中获取所有其他属性，而不是背景图像更改。

我知道在这一点上我必须明白我不知道的事情。任何帮助将不胜感激。

Answer 1

这是因为在加载Site.css之前加载了mobile.css。（在你做的例子中）。如果你先插入网站然后再移动，那么我认为它的工作正在进行..

如果由于某种原因需要保持这种方式，则需要在声明后使用!important。

在这里你可以找到一个有效的例子： http://jsfiddle.net/2EaQb/

mobile.css中的背景图像更改

1 个答案: