Question

我有这样的div：

<div class="mobile">Some mobile content</div>

默认情况下隐藏此内容（core.css）：

.mobile{display: none;}

现在，我想显示这个div，当浏览器分辨率低于1024px并且它不起作用时：

@media (max-width: 1024px) {
    .mobile{display: block;}
}

我该如何展示这个div？相反的方式可以正常工作 - 在分辨率发生变化时显示然后隐藏。

Answer 1

由于您使用相同的选择器，因此它将始终使用最后一个被调用的选择器。

看到这个小提琴：http://jsfiddle.net/9KtHg/

由于媒体查询最后被调用（因此在满足条件时它会覆盖CSS），因此它工作正常。

但是在这里：http://jsfiddle.net/9KtHg/1/

它不起作用，因为display:none是最后一个并且将覆盖其他CSS。

为避免这种情况，您需要在媒体查询中使用更高的特异性选择器，如：

div.mobile <-the tag name containing class='mobile'
[.][#][tag]parent .mobile <- use the parent in the selector
.mobile{display:block!important}<- using important is a bad pratice, avoid it.

您还可以在包含媒体查询的CSS文件之前添加core.css。

总之，欢迎来到神奇的CSS覆盖世界！

顺便说一句，CSS意味着“级联样式表”。正如它在名称中所说的那样，它可以作为一个级联工作，使用最后声明的CSS！

用css显示隐藏的元素

1 个答案: