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のGoogle Chromeで表示すると; 背景はまだあります..

これが検査要素です。

要素の検査 -- Google Chrome

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 に答える