css - CSS メディア クエリの実行

Question

カスケード内のメディア クエリの上にあるにもかかわらず、一般的なスタイルがメディア クエリの後に適用される CSS メディア クエリに問題があります。

例：

HTML:

<div id="myblock1">
    <div>Block 1</div>
    <div id="myblock2">Block 2</div>
    <div>Block 3</div>
</div>​

CSS:

#myblock1 div {
    display:block;
    background-color:#F00;
}

@media (min-width:600px) {
    #myblock2 {
        display:none;
    }
}​

ライブデモ: jsFiddle

理論的には、幅 600 ピクセル以下のウィンドウでは 3 つのブロックすべてが表示され、それよりも大きい場合は中央のブロックが消えるはずですが、そうではありません。一般的なスタイリングの前に ID/メディア クエリが適用される理由について何か考えはありますか?

Answer 1

これは、 (1 ID + 1 要素 vs 1 ID)#myblock1 divよりも具体的であるためです。#myblock2

より具体的にするか、!importantオーバーライドしようとしているルールを追加する必要があります。

• 具体的に：#myblock1 #myblock2 { display: none; }
• 使用!important:#myblock2 { display: none !important; }

---

私の意見では、最善の解決策は、ID ではなくクラス名を付けることで、外側のコンテナーの固有性を低くすることです。

<div class="myblock1">
    <div>Block 1</div>
    <div id="myblock2">Block 2</div>
    <div>Block 3</div>
</div>​

次に、次のようにするとうまくいきます。

.myblock1 div {
    display:block;
    background-color:#F00;
}

@media (min-width:600px) {
    #myblock2 {
        display:none;
    }
}​

Answer 2

それが機能しているよりも追加!importantしてくださいdisplay:none;。

#myblock1 div {
display:block;
background-color:#F00;
}

@media (min-width:600px) {
    #myblock2 {
        display:none!important;
    }
}​

注:メディア クエリは、メインの CSS よりも具体的ではないためです。すなわち。#myblock1 #myblock2 { display:none; }も動作するはずです

Answer 3

セレクターの特異性が十分に高くないため、以前のルールをオーバーライドしていません。代わりにこれを試してください：

@media (min-width:600px) {
    #myblock1 #myblock2 {
        display: none;
    }
}​

デモ: http://jsfiddle.net/7aWpQ/2/