html - Css 显示无不工作

Question

@media screen and (min-width: 900px) and (max-width: 1215px) {
 #menu {
      display:none;
   }
}

这不起作用，div 仍然可见。但是，如果我将 div 更改为 <div class="menu">而不是 <div id="menu">和CSS:

@media screen and (min-width: 900px) and (max-width: 1215px) {
   .menu {
       display:none;
   }
}

它有效。为什么会这样？

编辑

检查员是这样说的:

element {
    display: block;
}
#listMenuTop {
    display: none;
}
#listMenuTop {
    display: none;
    margin-bottom: -14px;
    margin-top: 10px;
}

但是两个 display:none 都被划掉了。显示在哪里: block ；来自？

编辑 2

我发现了问题。一个 js 函数正在覆盖 css 显示属性:

document.getElementById('listMenuTop').style.display='block';

我想做的是在屏幕 >= 900px 和屏幕 < 900px 时隐藏#listMenuTop 以便能够从按钮显示/隐藏#listMenuTop。问题是，当 #listMenuTop 显示在 < 900px 的屏幕上时，如果我将屏幕大小调整为超过 900px，它不会隐藏，因为该 js 函数总是覆盖 display 属性。

Answer 1

试试这个:

@media screen and (min-width: 900px) and (max-width: 1215px) { 
    #menu {   
        display:none !important;
    }   
}

谢谢