Question

我的Wordpress网站标题中的主菜单出现问题：http://eptestdev.us/qa

我可以让它填充整个盒子的唯一方法是声明它的宽度为950px。但是，当用户在移动设备上离开移动菜单时，我希望它消失。

我的CSS看起来像这样，但它不起作用：

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

不知道如何让它崩溃。任何帮助将不胜感激。

Answer 1

您只需要将！important标记添加到您的css中，以便它覆盖其他所有内容。像这样：

display: none !important;

我在您的网站上对此进行了测试，但确实有效。

Answer 2

一般来说，最好避免使用!important - 而是使用CSS自然的方式来确定使用哪个规则。

早期规则（位于样式表顶部）被后来的规则否决：

.box { width: 200px; border: 1px solid black }
.box { width: 500px; }

第二条规则将覆盖之前的width声明，为您提供一个带黑色边框的500px框。

在您的情况下，您的媒体查询规则不起作用的原因是它发生在“正常”之前。如果你切换：

@media screen and (max-width: 900px){#access, #copyright, .menu-footer-menu-container {display: none;}}

/* ... other rules ... */

#access, #access-footer {
  background:#000000;
  clear:both;
  display:block;
  float:left;
  margin:0 auto 2px;
  width:100%;
  max-height:20px;
}

与

/* ... other rules ... */

#access, #access-footer {
  background:#000000;
  clear:both;
  display:block;
  float:left;
  margin:0 auto 2px;
  width:100%;
  max-height:20px;
}    

@media screen and (max-width: 900px){#access, #copyright, .menu-footer-menu-container {display: none;}}

此规则无需使用即可使用！important。

还有其他方法可以保留规则：例如，在更通用的规则之前将使用更具体的规则：

#menu .submenu-item {color：green; } .submenu-item {color：red; }

只要您的.submenu-item divs are within a '#menu' div, they'll be green, because the subsequent颜色：红色'声明没有相同的特异性水平。

您可以在此处详细了解： https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

有最大宽度菜单的麻烦

2 个答案: