删除特定媒体查询的背景

Question

我希望我的背景在满足特定屏幕尺寸时消失.这是我的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;
    }

然后当我在谷歌浏览器上查看它时,屏幕大小为479像素; 背景还在那里..

这是Inspect Element,

检查元素 - 谷歌浏览器

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
}

我做错了什么？订单重要吗？

Answer 1

是的,选择器的顺序很重要,因为样式表是从上到下读取的(这是CSS的级联性质).这意味着如果要覆盖它,则必须将媒体查询CSS放在初始声明下面.

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

这里的例子

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