突出显示活动链接

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

欣赏支持。

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;  
}

来源

2015-09-26 David

的一点是，试图让自己的风格来覆盖已color指定的其他样式。

我建议对CSS具体读了：https://css-tricks.com/specifics-on-css-specificity/

尝试

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

参见：https://jsfiddle.net/9drxzat5/

来源

2015-09-26 04:10:51

显然，你的代码适用于Chrome，但不是Safari浏览器。我已清除缓存和Cookie。 – David

您将不得不使用Safari浏览器的开发工具来尝试弄清楚。祝你好运。 –

所以它在一开始工作，但随后变成一个访问链接，文本变成灰色。 – David

突出显示活动链接

回答

相关问题