我正在尝试从头开始构建一个漂亮的导航。我在导航中内置了一些分隔符作为列表项。我希望当屏幕尺寸较小时这些消失。
这是我的 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;
}
}
背景色绿色工作正常，但分隔符没有消失，这有什么原因吗？
最佳答案
您已在 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;
}
关于html - 显示在媒体查询中不工作的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41794761/