显示 none 在媒体查询中不起作用
[英]Display none not working inside of media query
问题描述
I am trying to build a nice nav from the ground up.
我正在尝试从头开始构建一个不错的导航。 I have some seperators built into my nav as list items.我在我的导航中内置了一些分隔符作为列表项。 I want these to dissapear when the screen size is smaller.我希望这些在屏幕尺寸较小时消失。
This is my HTML:这是我的 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>
This is my CSS:这是我的 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;
}
}
The background color green works fine, but the separators do not disappear, any reason for this?背景颜色绿色工作正常，但分隔符没有消失，这是什么原因？
2 个解决方案
解决方案1
3 已采纳 2017-01-22 18:45:31
You have set your #nav_ul li to display: auto in your CSS, as #nav_ul li is a higher level of specificity than the nav_seperator it takes priority when rendered.您已将#nav_ul li设置为display: auto在您的 CSS 中，因为#nav_ul li比nav_seperator具有更高级别的特异性，它在渲染时具有优先级。
To combat this you should change .nav_seperator to #nav_ul .nav_seperator in your CSS and the specifier will take priority over the #nav_ul li specifier.为了解决这个问题，你应该改变.nav_seperator到#nav_ul .nav_seperator在你的CSS和符会优先于#nav_ul li符。
This:这个：
.nav_seperator {
display: none;
}
Becomes this:变成这样：
#nav_ul .nav_seperator {
display: none;
}
解决方案2
0 2017-01-22 18:50:02
In your style, selector #nav_ul li has higher a specificity than .nav_seperator . 在您的样式中，选择器#nav_ul li具有比.nav_seperator高的特异性。
-
#nav_ul liscores1 0 1#nav_ul li得分1 0 1 -
.nav_seperatorscores0 1 0.nav_seperator得分0 1 0
What you can do is either to override #nav_ul li with a higher score #nav_ul .nav_seperator , or use a more advanced :not() selector to avoid overriding. 您可以执行的操作是用更高的分数#nav_ul .nav_seperator覆盖#nav_ul li ，或者使用更高级的: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>
解决方案3
0 2017-01-22 18:53:48
Above answers will solve it, but if you can't or don't want to change your CSS for some reason try placing the separators in <p></p> tags which should work.上面的答案将解决它，但如果由于某种原因您不能或不想更改 CSS，请尝试将分隔符放在<p></p>标签中，这应该可以工作。
Eg例如
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.