3

そこで、スレッドCSS: How to change color 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があります。

4

1 に答える 1

4

どうですか

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

問題は、#navMain ul li aルールがより具体的である#current aため、優先されることです..

上記のルールに 2 つの ID を使用#navMain #current aすると、ルールがより具体的になり、適用されます。

于 2013-05-29T14:13:35.650 に答える