在媒体查询中不显示任何内容

时间:2017-01-22 18:41:04

标签: html css media-queries display

我正试图从头开始构建一个漂亮的导航。我的导航内置了一些分隔符作为列表项。当屏幕尺寸较小时,我希望这些消失。

这是我的HTML:

 <head>
      <title>Personal Portfolio Page</title>
  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet" type="text/css">
</head>
<body>
  <nav id="top_nav">
    <ul id="nav_ul">
      <li><a href="#">Who </a></li>
      <li class="nav_seperator">|</li>
      <li><a href="#">Work</a></li>
      <li class="nav_seperator">|</li>
      <li><a href="#">Blog</a></li>
      <li class="nav_seperator">|</li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>

这是我的CSS:

html {
  font-family: 'Quicksand', sans-serif;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
}

#top_nav {

}

#nav_ul {
  list-style: none;
  margin: 18.5px 20px 18.5px 20px;
  padding: 0px;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#nav_ul li {
  display: inline;
  margin: auto;
}

#nav_ul a {
  text-decoration: none;
  font-size: 50px;
  background-color: pink;
  margin: 0px;
  padding: 0px;
}

.nav_seperator {
  font-size: 50px;
  padding: 0;
  margin: 0;
}

@media screen and (max-width: 590px) {

  #nav_ul a{
    background-color: green;
  }

  .nav_seperator {
    display: none;
  }

}

背景颜色绿色工作正常,但分隔符不会消失,任何原因?

3 个答案:

答案 0 :(得分:3)

您已在CSS中将#nav_ul li设置为display: auto,因为#nav_ul li的特异性高于呈现时优先级nav_seperator

要解决此问题,您应该在CSS中将.nav_seperator更改为#nav_ul .nav_seperator,并且说明符将优先于#nav_ul li说明符。

这:

.nav_seperator {
    display: none;
 } 

成为这个:

#nav_ul .nav_seperator {
    display: none;
} 

答案 1 :(得分:0)

在您的风格中,选择器#nav_ul li的特异性高于.nav_seperator

  • #nav_ul li得分1 0 1
  • .nav_seperator得分0 1 0

您可以做的是覆盖#nav_ul li得分更高的#nav_ul .nav_seperator,或使用更高级的:not()选择器来避免覆盖。

#nav_ul li:not(.nav_seperator) {
  display: inline;
}

html {
  font-family: 'Quicksand', sans-serif;
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  padding: 0;
}
#top_nav {} #nav_ul {
  list-style: none;
  margin: 18.5px 20px 18.5px 20px;
  padding: 0px;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#nav_ul li:not(.nav_seperator) {
  display: inline;
  margin: auto;
}
#nav_ul a {
  text-decoration: none;
  font-size: 50px;
  background-color: pink;
  margin: 0px;
  padding: 0px;
}
.nav_seperator {
  font-size: 50px;
  padding: 0;
  margin: 0;
}
@media screen and (max-width: 768px) { /*changed for demo purpose*/
  #nav_ul a {
    background-color: green;
  }
  .nav_seperator {
    display: none;
  }
}
<nav id="top_nav">
  <ul id="nav_ul">
    <li><a href="#">Who </a></li>
    <li class="nav_seperator">|</li>
    <li><a href="#">Work</a></li>
    <li class="nav_seperator">|</li>
    <li><a href="#">Blog</a></li>
    <li class="nav_seperator">|</li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

答案 2 :(得分:0)

以上答案将解决这个问题,但如果您因某些原因无法或不想更改CSS,请尝试将分隔符放在<p></p>标记中,这些标记应该有效。

E.g。

<nav id="top_nav">
    <ul id="nav_ul">
      <li><a href="#">Who </a></li>
      <li><p class="nav_seperator">|</p></li>
      <li><a href="#">Work</a></li>
      <li><p class="nav_seperator">|</p></li>
      <li><a href="#">Blog</a></li>
      <li><p class="nav_seperator">|</p></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>