如何让@media优先于普通样式

Question

我有两个CSS，一个用于iPhone（@media），一个用于标准浏览器，我基本上想要一个或另一个为真：

#currentroom_users {
    width: 175px;
    float: left;
    border-left: 1px dotted <?php echo $themeSettings['tab_border_light'];?>;
    padding-left: 5px;
    overflow-y: auto;
    overflow-x: hidden;
}

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) { 
    #currentroom_users {
        display: none;
    }
}

目前，标准#currentroom_users样式始终存在。如果我在iPhone（@media）上，它只会添加＆＃34; display：none;＆＃34;但保留所有其他造型......

这基本上是我希望在桌面浏览器上显示的DIV，如果我在iPhone上则隐藏。

这是我添加媒体标签之前的显示方式，显示div（其div为用户名）： http://i.imgur.com/4zHoCd5.png

这是我添加媒体标签后的显示方式，div未显示但是应该存在的空间仍然存在： http://i.imgur.com/YYEs6jc.png

我注意到当我查看源代码时，代码仍会显示在代码中..不确定是否是预期的。

由于

Answer 1

来自#currentroom_users的样式会逐渐降低您的样式表并在媒​​体查询中应用于您的样式。因此CSS代表级联样式表......

级联

要强调一点......你的风格也不必在媒体查询中发生这种情况。或者换句话说，样式总是级联。这就是为什么你可以遇到某些代码只有在不同代码之上或之下放置的问题。例如：

你有一个选择器，其中包含一些样式，从第001行开始......

001    .selector ul li {
002       color: #fff;
003       font-size: 2em;
004       text-transform: uppercase;
005    }

然后......不同选择器的其他一些风格发生......

006   .differentSelector { border: 1px solid red; }
.........
.........
125   .evenMoreDifferent { background: #000; }

然后......你再次使用与001相同的选择器，但添加不同的样式，并更改一个属性。

126   .selector ul li {
127      color: #c00;
128      background: blue;
129      border-radius: 10px;
130   }

您的浏览器读取的内容......

在您的浏览器中加载页面时，浏览器将使用以下信息读取选择器：

.selector ul li {
   color: #c00;
   font-size: 2em;
   text-transform: uppercase;
   background: blue;
   border-radius: 10px;
}

关于您帖子后面的其他问题的一些定义

“我注意到，当我查看源代码时，div仍会显示在代码中..不确定是否是预期的。”

CSS是一种可视化改变HTML元素的代码。它不以任何方式改变HTML本身。当您将某些内容设置为display: none;时，您只是告诉浏览器不应显示此元素，因此它将呈现为不可见。代码仍然存在，并且该元素保留了所有以前的CSS样式，以防您在任何时候使其可见，但它在视图中是隐藏的。

重要的是要注意，通过将元素从文档中完全删除，这会使元素“不可见”。

See this Wiki on the CSS Property "Display"

您的具体案例

您会发现将其设置为display：none;实际上并没有“留下以前占据的空间”。那个空间现在是“空的”。您的列似乎仍然存在，但这很可能是因为您的左列具有某种设置宽度。

Here is a JSFiddle demonstrating the above.有三个div，每个都有不同的颜色，所有80px到80px。您将看到在CSS表格的底部，我已将.blue类设置为display: none;您还会注意到，黄色框正在触摸红色框。如果你注释掉这一行，你会看到蓝色框重新出现在红色和黄色框之间。

现在...... Here is a JSFiddle that uses opacity而不是显示以使该框不可见。你会注意到蓝色的盒子已经消失了，但它有一个白色的空间。这是因为从字面上看，这个词一直是隐形的。实际从文档中删除之间的关键区别。

最后，here is a JSFiddle using the visibility property ...再一次，您会注意到蓝色方框是不可见的，但仍有空格。

总结......

• 无论如何，样式总是级联。
• 您设置的元素 display：none;实际上已经从文档中删除了，它只是 看起来不像它。您可能需要调整宽度 左栏。
• 只是因为div已被删除了 文档，并不意味着它已从代码中删除。