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

Question

所以我找到了帖子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。

Answer 1

怎么样

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

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

对上述规则#navMain #current a使用两个ID会使其更具体，因此会应用它。