1

我有一个这样的div：

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

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

.mobile{display: none;}

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

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

我怎样才能显示这个div？相反的方式工作正常 - 当分辨率改变时显示然后隐藏。

4

1 回答 1

4

Since you use the same selector, it will always use the last called selector.

See this fiddle : http://jsfiddle.net/9KtHg/

It is working perfectly since the media query is called last (so it override the CSS when the condition are met).

But here : http://jsfiddle.net/9KtHg/1/

It is not working since the display:none is last and will override the other CSS.

To avoid that, you need to use greater specificity selector in the media query like :

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.

You could also include the core.css before your CSS files containing your mediaqueries.

In conclusion, welcome to the fabulous world of CSS override!

By the way, CSS mean "cascading style sheets". As it said in its name, it work as a cascade where the last declared CSS will be used!

于 2013-05-29T17:48:14.377 回答