html - 突出显示事件链接

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/