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的顺序无法解决您的问题，则问题为specificity。只需增加媒体查询中选择器的specificity，以便有效地覆盖其他CSS。

Example Here

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

Answer 2

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

例如，在您的媒体查询中，请尝试以下操作：

.videohome { background-image: none !important; background-color:#fefefe; }

Answer 3

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

删除特定媒体查询的背景

3 个答案: