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

理论上，所有 3 个块都应该在 600px 宽度或更小的窗口中可见，并且当更大时中间块应该消失，但事实并非如此。关于为什么在一般样式之前应用 ID/媒体查询的任何想法？

Answer 1

那是因为#myblock1 div比#myblock2（1 ID + 1 元素 vs 1 ID）更具体。

您要么需要更具体，要么添加!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 具体。IE。#myblock1 #myblock2 { display:none; }也应该工作

Answer 3

您的选择器的特异性不够高，因此它不会覆盖您之前的规则。试试这个：

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

演示：http: //jsfiddle.net/7aWpQ/2/