突出顯示活動鏈接

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/