我正试图从头开始构建一个漂亮的导航。我的导航内置了一些分隔符作为列表项。当屏幕尺寸较小时,我希望这些消失。
这是我的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;
}
}
背景颜色绿色工作正常,但分隔符不会消失,任何原因?
答案 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>