Question

我正在创建一个侧边栏菜单并且突出显示活动链接时出现问题 - 我希望突出显示的链接的文本是白色而不是灰色。

感谢支持。

HTML

<div id="nav">
<ul>
    <li class="active"><i class="fa fa-pencil"> Post Blog</i></a></li>
    <li><a Href="/menu.php"><i class="fa fa-pencil"> Post Blog</i></a></li>
    <li><a Href="/calendar.php"><i class="fa fa-pencil"> Post Blog</i></a></li>
    <li><a Href="/shop.php"><i class="fa fa-pencil"> Post Blog</i></a></li>
</ul> 
</div>

CSS

#nav{
position: fixed;
width: 180px;
margin-left: -180px;
background-color: rgba(255,255,255, 0.8);  
}
#nav ul{
list-style: none;
margin: 0;
padding: 0;
}
#nav li a:link, li a:visited{
display: block;
padding: 15px 15px;
border-left: 8px solid #005b86;
text-decoration: none;
color: #333333;  
}
#nav li a:hover{
background-color: #005b86;
color: #FFF;
}
#nav .active{
background-color: #005b86;
color: #FFF;    
}

Answer 1

重点是尝试让你的风格覆盖指定color的其他样式。

我建议阅读css特异性：https://css-tricks.com/specifics-on-css-specificity/

尝试

#nav li.active a:link{
  background-color: #005b86;
  color: #FFF;    
}

请参阅：https://jsfiddle.net/9drxzat5/

突出显示活动链接

1 个答案: