Html CSS 显示无不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20326630/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Css display none not working
提问by user2361682
@media screen and (min-width: 900px) and (max-width: 1215px) {
#menu {
display:none;
}
}
This is not working, the div is still visible. However, if I change the div to <div class="menu">instead of <div id="menu">and the css :
这不起作用，div 仍然可见。但是，如果我将 div 更改为<div class="menu">而不是<div id="menu">css ：
@media screen and (min-width: 900px) and (max-width: 1215px) {
.menu {
display:none;
}
}
it works. Why is this happening?
有用。为什么会这样？
EDIT
编辑
This is what Inspector says:
督察是这样说的：
element {
display: block;
}
#listMenuTop {
display: none;
}
#listMenuTop {
display: none;
margin-bottom: -14px;
margin-top: 10px;
}
But both display:none are crossed. Where does the display: block; comes from ?
但是两个 display:none 都被交叉了。显示在哪里：块；来自？
EDIT 2
编辑 2
I found the problem. A js function was overwriting the css display property:
我发现了问题。一个 js 函数正在覆盖 css display 属性：
document.getElementById('listMenuTop').style.display='block';
What I want to do is to hide #listMenuTop when screen >= 900px and when screen < 900px to be able to display/hide #listMenuTop from a button. The problem is that when #listMenuTop is displayed on a screen < 900px it doesn't hide if i resize screen to more than 900px, because that js function is always overwriting the display property.
我想要做的是在屏幕 >= 900px 和屏幕 < 900px 时隐藏 #listMenuTop 以便能够从按钮显示/隐藏 #listMenuTop。问题是，当#listMenuTop 显示在小于 900 像素的屏幕上时，如果我将屏幕大小调整到 900 像素以上，它不会隐藏，因为该 js 函数总是覆盖显示属性。
回答by Pradeep Pansari
Try this instead:
试试这个：
@media screen and (min-width: 900px) and (max-width: 1215px) {
#menu {
display:none !important;
}
}
Thanks
谢谢
回答by skobaljic
Since your inspector says you have inline stylesadded by Javascript (question updated) as:
由于您的检查员说您已通过 Javascript 添加了内联样式（问题已更新）为：
<div id="listMenuTop" style="display: block;"> ... </div>
than your CSS should look like this:
比你的 CSS 应该是这样的：
@media screen and (min-width: 900px) and (max-width: 1215px) {
/* Following will override inline style */
#listMenuTop[style] {
display: none !important;
}
}
