用css显示隐藏的元素 [英] show hidden element with css

问题描述

我有这样的div：

 < div class =mobile>一些移动内容< / div> ; 
  

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

  .mobile {display：none;} 
  

现在，我想显示这个div，当浏览器的解析度低于1024px，它不工作：

  @ media（max-width：1024px）{
 .mobile {display：block;} 
} 
  

如何显示此div？

解决方案

由于您使用相同的选择器，它将始终使用最后呼叫选择器。

查看此小提琴： http：// jsfiddle .net / 9KtHg /

由于媒体查询是最后调用的（因此当满足条件时它会覆盖CSS） p>

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

它不工作，因为显示：无是最后一个， CSS。

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

  div.mobile<  - 包含class ='mobile'的标记名
 [。] [＃] [tag] parent .mobile<  - 使用选择器中的父级
 .mobile {display：block！important}<  - 使用重要是一个坏的pratice，避免它。 
  

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

总之，欢迎来到CSS覆盖的神话世界。顺便说一下，CSS意味着级联样式表。正如它在名称中所说的，它作为一个级联，其中最后一个声明的CSS将被使用！

I have a div like this:

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

This content is hidden by default (core.css):

.mobile{display: none;}

Now, I want to show this div, when browser resolution is lower than 1024px and it doesn't work:

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

How can I show this div? Opposite way works fine - showing and then hiding when resolution changes.

解决方案

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!

这篇关于用css显示隐藏的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！