3

当满足特定的屏幕尺寸时，我希望我的背景消失。这是我的CSS代码.. 

@media only screen and (min-width: 0px) and (max-width: 479px) {
        .videohome { background-image: none; background-color:#fefefe; }
    }

.videohome {
        background: url(images/extras/homevideobg.png) repeat-x #e6e6e6;
    }

然后当我在屏幕尺寸为 479px 的谷歌浏览器上查看它时；背景还在。。

这是检查元素，

检查元素——谷歌浏览器

www.mysite.com/media="all"
.videohome {
background: url(images/extras/homevideobg.png) repeat-x #e6e6e6;
}
___________________________________

www.mysite.com/media="all"
@media only screen and (max-width: 479px) and (min-width: 0px)
.videohome {
background-image: none;  <-- this part is Striked Through
background-color: #fefefe;  <-- this part is Striked Through
}

我做错了什么？顺序重要吗？

4

3 回答 3

6

是的，选择器的顺序很重要，因为样式表是从上到下读取的（这是 CSS 的级联性质）。这意味着如果您想要覆盖媒体查询 CSS，则必须将其放在初始声明下方。

如果更改 CSS 的顺序不能解决您的问题，那么问题就是特异性。只需在媒体查询中增加选择器的特异性，以便有效地覆盖其他 CSS。

示例在这里

@media only screen and (max-width: 479px) and (min-width: 0px) {
    .videohome {
        background: none;
    }
}
于 2013-10-21T00:47:39.503 回答
4

通常，您必须!important在特定媒体查询中使用规则来覆盖在任何查询之外定义的规则。

例如，在您的媒体查询中，试试这个：

.videohome { background-image: none !important; background-color:#fefefe; }
于 2013-10-21T00:46:51.427 回答
2

但是，顺序很重要。此外，请确保您没有在任何媒体查询之后为您的 .videohome 设置其他背景。所以媒体查​​询通常总是最后。如果事情变得丑陋，请记住!important; 任何 css 语句之后的关键字，但要非常小心，因为通常最好不要使用，除非绝对必要。

于 2013-10-21T00:50:01.673 回答