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

在您的风格中，选择器#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>

Answer 3

以上答案将解决这个问题，但如果您因某些原因无法或不想更改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>

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

3 个答案: