mobile.css中的背景图像更改

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上简单地将其更改为“ none”或其他图像，这有点类似于此（我已经尝试了几种变体）：

#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。 （在您创建的示例中）。 我认为如果您先插入网站，然后再插入mobile.css，它就会起作用。

如果出于某种原因需要保持这种方式，则需要在语句后使用!important 。

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