CSS显示没有不起作用答案

【问题标题】：Css display none not workingCSS显示没有不起作用
【发布时间】：2026-01-29 01:25:01
【问题描述】：

@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;
   }
}

它有效。为什么会这样？

编辑

Inspector 是这样说的：

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

但是两个 display:none 都被交叉了。显示在哪里：块；来自？

编辑 2

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

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

我想要做的是在屏幕 >= 900 像素和屏幕

【问题讨论】：

你有没有可能在某个地方有另一个#menu？一个页面上应该只有 1 个 ID。
应该工作jsFiddle
@BeatAlex 没有。我没有另一个#menu。
可能是元素，当它具有 id 时，它被另一个选择器覆盖。也许有一个具有更大特异性的选择器，或者在您提到的选择器之后定义了另一个选择器。使用开发者工具进行检查。
它应该可以工作。检查 dom 检查器中元素的 css。它显示了什么？

标签： html css media-queries

【解决方案1】：

试试这个：

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

谢谢

【讨论】：

【解决方案2】：

由于您的检查员说您有内联样式由 Javascript 添加（问题已更新）：

<div id="listMenuTop" style="display: block;"> ... </div>

你的 CSS 应该是这样的：

 @media screen and (min-width: 900px) and (max-width: 1215px) {
      /* Following will override inline style */
      #listMenuTop[style] {
           display: none !important;
      }
 }

【讨论】：

我不建议有人使用!important，如果可以仅使用选择器来修复它。 更具体的选择器具有更高的优先级
这就是为什么important 不是我的主要答案。但是，如果它首先被寻址为!important，那么您需要以同样的方式覆盖它，这意味着使用!important。
如果他使用!important，最好删除!important 选择器。但是我看到你更新了你的代码，编辑你的代码一次，这样我就可以收回我的 -1。但还是建议不要使用!important。
这只是练习...我从不建议使用!important，但有时您无法控制现有的 CSS，您可以添加新的（经常发生）。