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

Question

我发现了这个帖子：CSS: 如何更改活动导航页面菜单的颜色，并尝试实现，但没有成功。

这是我的菜单：

<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，展示了我目前拥有的内容。

- user2432772

---

你能澄清一下你的目标吗？你希望发生什么，当前发生了什么，以及你遇到了哪些问题，阻止你实现目标？"had no success"的意思是"没有成功"。 - George Cummins

你发布的代码似乎可以工作：http://jsfiddle.net/j08691/jTkvu/。 - j08691

您想要添加一个活动类吗？ - DiederikEEn

Answer 1

你能行吗？

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

问题在于你的#navMain ul li a规则比#current a更具体，因此它具有优先权。

使用以上规则中的两个ID #navMain #current a 使其更加具体化，从而得到应用。

- Gabriele Petrioli