如何更改活动导航页面菜单的颜色答案

【问题标题】：How to change color of active navigation page menu如何更改活动导航页面菜单的颜色
【发布时间】：2013-05-29 14:10:40
【问题描述】：

所以我找到了线程CSS: How to change colour of active navigation page menu 并试图这样做但没有成功。

这是我的菜单：

<div id="navMain">
     <ul>

    <li id="current"><a href="user.php" >User</a></li>
    <li><a href="../admin/admin.php">Create User</a></li>   
    <li><a href="../admin_reg/admin_reg.php">Create Admin</a></li>  

    </ul>
</div>

这是我的 CSS：

/***************************/
/* Genral Navigation Rules */
/***************************/
#navMain {
    text-align: center;
    margin:-70px ;
}   
#navMain ul {
    margin: 0px auto;
    padding:0px;
}

#navMain ul li {
    margin: 0px auto;
    padding:0px 20px;
    list-style:none;
    display:inline;
}

#navMain ul li a {
    margin: 0px auto;
    padding:0px;
    color:  #FFFFFF;
    text-decoration:none;
    font-weight:normal;
    font-size: 19px;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    text-transform:uppercase;
}

#navMain ul li a:hover {
    text-decoration:underline;
    color: #EF7D50;
}
#current {
    color: #EF7D50;
}
#current a{
    color: #EF7D50;
}

这是我目前拥有的jsfiddle。

【问题讨论】：

"没有成功" 你能阐明你的目标吗？您预计会发生什么，目前正在发生什么，您遇到了哪些阻碍您完成任务的问题？
您发布的代码似乎有效：jsfiddle.net/j08691/jTkvu.
你想添加一个活跃的类吗？

标签： html css

【解决方案1】：

怎么样

#navMain #current a{
    color: #EF7D50;
}

问题是您的#navMain ul li a 规则比#current a 更具体，因此它具有优先权..

对上述规则 #navMain #current a 使用两个 id 使其更加具体，因此得到应用..

【讨论】：