css - 显示常规导航菜单中未显示的响应式菜单链接

Question

我想在隐藏在常规页面导航中的移动菜单中显示一个链接。我删除了“主页”导航链接

<li id="home-menu"><a href="./index.html">HOME</a> </li>

来自 styles.css 第 60 行的常规网页 View ，使用 display:none 的替代方法，在此处讨论:http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont .

#home-menu {
  position: absolute;                           
  overflow: hidden; 
  clip: rect(0 0 0 0);                         
  height: 1px; width: 1px; 
  margin: -1px; padding: 0; border: 0;          
}

现在，我想启用移动菜单列表中的“主页”链接。在styles.css的第176行，我尝试显示#home-menu，

#home-menu {
display: inline-block;
}

但它不会显示在响应式菜单中。我真的在努力避免使用 !important。我将不胜感激学习如何解决这个问题。我的示例位于 http://nspowers.org/ask/display/

Answer 1

这里有很多事情要做，所以在不深入细节的情况下，我会建议一个更简洁的替代方案:

删除绝对定位及其相关规则，而是使用 display: none; 来隐藏 #home-menu 最初 - 然后添加 display: block; 在移动中断点让它重新出现:

header#topnav nav ul li#home-menu {
    display: none; /* Also remove the !important rule from here */
    /* position: absolute;                           
    overflow: hidden; 
    clip: rect(0 0 0 0);                         
    height: 1px; width: 1px; 
    margin: -1px; */
    padding: 0; border: 0; 
}

让主页在较小的设备上重新出现:

@media only screen and (max-width: 579px) {
   header#topnav nav ul li#home-menu {
       display: block; 
   }
}

这似乎是一个更简单、更易于维护的解决方案，而且您不需要覆盖那么多规则。

---

^{如果您对其工作原理感到困惑，请阅读有关选择器特异性的内容 - 请参阅:http://www.w3.org/TR/css3-selectors/#specificity , http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/和 https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity了解更多。}