显示 none 在媒体查询中不起作用

Question

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

这是我的 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;
  }

}

背景颜色绿色效果很好，但分隔符没有消失，这是什么原因？

Answer 1

您已在 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;
}

Answer 2

以上答案可以解决问题，但如果您出于某种原因不能或不想更改 CSS，请尝试将分隔符放在应该有效的 <p></p> 标签中。

例如

<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>

显示 none 在媒体查询中不起作用

Display none not working inside of media query

html

css

media-queries

display