html - CSSで選択したリスト項目に別の色を与える方法は?

Question

私はこの質問が以前に何度も尋ねられたことを知っています。しかし、自分のコードに適したトリックが見つかりません。ナビゲーション バーのアクティブなリスト項目に別の色が必要です。明らかに。ばかげた小さなこと。知っている。でも頑張って助けてください。

ここに私のHTMLコードがあります:

<div id="container">  
    <ul id="nav">  
        <li class="active"><a href="am_home.html">Home</a></li>  
        <li><a href="am_teachingassistants.php">Teaching Assistants</a></li>  
        <li><a href="am_courseinfo.php">Course Info</a></li>  
        <li><a href="am_timetable.php">Time Table</a></li>  
    </ul>  
</div>  

CSSファイルは次のとおりです。

#container {
    position: relative;
    top: -2em;
    z-index: 2;
    width: 1200px;
    margin: auto auto;
}

#nav {
   position: relative;
   float: left;
   margin-left: 400px;
}

#nav li {
    list-style: none;
    float: left;
    border-right: 1px solid #afc4cc;
}

#nav li a {
   position: relative;
   z-index: 2;
   float: left;
   padding: 5px 45px;
   font-size: 15px;
   font-weight: bold;
   font-family: helvetica, arial, sans-serif;
   text-decoration: none;
   color: #39aea8;
}

ul, li {
    margin: 0;
    padding: 0;
}

ul#nav li a:link,ul#nav li a:visited {
    color: #39aea8;
    text-decoration: none;
}

ul#nav li a:hover,ul#nav li a:active {
    color: #f4ba51;
    text-decoration: none;
}

Answer 1

CSS コードに問題があります。これを置き換えるだけです：

 ul#nav li a:hover,ul#nav li a:active{    
}

これとともに：

 ul#nav li a:hover,ul#nav li.active a{
 // here styling 
}

そして、あなたは行ってもいいです。CSS でアクティブなクラスを呼び出すときにミスを犯しました。

Answer 2

ul#nav li.active a { color: #f4ba51 ; }