gpt4 book ai didi

html - 导航栏的伪类不起作用

转载 作者:太空宇宙 更新时间:2023-11-04 02:08:05 24 4
gpt4 key购买 nike

所以我有一个简单的导航栏,但由于某种原因无法正常工作。除此链接和页面外,所有其他链接和页面均有效,我想知道是否有人能够发现以下代码中的错误。请注意“glob”不是黄色的。我以为我在其他地方有一个更具体的规则,它覆盖了那个规则,但我不认为我有这样的规则,我只是不太具体。

#subnav {
height: 10%;
text-align: center;
background-color: green;
width: 100%;
}
#subnav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
text-align: center;
width: 100%;
font-weight: bold;
}
#subnav li {
display: inline-block;
}
#subnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#subnav li a:hover {
color: yellow;
}
#subnav li a:active {
color: yellow;
}
<div id="subnav">
<ul>
<li> <a href="sam.html">Sam </a></li>
<li> <a href="sam.html">Sam </a></li>
<li> <a href="sam.html">Sam </a></li>
<li> <a href="sam.html">Sam </a></li>
<li> <a href="sam.html">Sam </a></li>
<li> <a href="sam.html">Po </a></li>
<li> <a class="active" href="glob.html">Glob </a></li>
<li> <a href="sam.html">Donors </a></li>

</ul>
</div>

最佳答案

.active 在您的例子中是一个,而不是可以通过伪选择器寻址的状态。所以你的选择器必须是

#subnav li a.active {
color: yellow;
}

(注意 . 而不是 :)

#subnav {
height: 10%;
text-align: center;
background-color: green;
width: 100%;
}
#subnav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
text-align: center;
width: 100%;
font-weight: bold;
}
#subnav li {
display: inline-block;
}
#subnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#subnav li a:hover {
color: yellow;
}
#subnav li a.active {
color: yellow;
}
<div id="subnav">
<ul>
<li> <a href="sam.html">Sam </a></li>
<li> <a href="sam.html">Sam </a></li>
<li> <a href="sam.html">Sam </a></li>
<li> <a href="sam.html">Sam </a></li>
<li> <a href="sam.html">Sam </a></li>
<li> <a href="sam.html">Po </a></li>
<li> <a class="active" href="glob.html">Glob </a></li>
<li> <a href="sam.html">Donors </a></li>

</ul>
</div>

关于html - 导航栏的伪类不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40312472/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com