CSS - 在保留顏色的同時更改導航欄的活動狀態

Question

我有一個CSS nav屬性，我用於我的網站上的導航欄。導航欄上的每個項目都有一個不同的底部邊框顏色，爲此相關的代碼如下：

nav li.active a, nav li.active a:hover, nav a:active { 
    border-bottom: 3px solid #48a9c0; 
    <!--This code makes the nav bar item appear highlighted--> 
    background: #323637; 
    background-image: -webkit-linear-gradient(top, #484e4f, #323637); 
    background-image: -moz-linear-gradient(top, #484e4f, #323637); 
    background-image: -o-linear-gradient(top, #484e4f, #323637); 
    background-image: linear-gradient(to bottom, #484e4f, #323637); 
} 

nav li.blue a, nav li.blue a:active { 
    border-bottom-color: #48a9c0; 

nav li.green a, nav li.green a:active { 
    border-bottom-color: #56c93d; 
} 
nav li.red a, nav li.red a:active { 
    border-bottom-color: #a54e49; 
} 

這是我如何在我的HTML文件執行此：

<ul> 
    <li class="active"><a href="index.html">Home</a></li> 
    <li class="green"><a href="page2.html">Page 2</a></li> 
    <li class="red"><a href="page3.html">Page 3</a></li> 
</ul> 

我問題是，只要我將<li>項目的課程設置爲「有效」，底部欄始終爲藍色。如何修改我的CSS代碼以允許導航項的兩種狀態：活動/高亮顯示狀態和正常狀態（均具有相同的底部欄顏色）。這是我第一次直接使用CSS，所以對我來說很簡單;）

Answer 1

我認爲你可能會混淆<a>的活動狀態和添加到<li>元素的活動類。見什麼，我想你的意思是這樣解釋：http://codepen.io/astrotim/pen/keiud

對於這個HTML（我已經複製到每個導航項目來表示添加了「積極」級）

<nav> 
    <ul> 
    <li class="blue"><a href="#">Normal</a></li> 
    <li class="green"><a href="#">Normal</a></li> 
    <li class="red"><a href="#">Normal</a></li> 
    <li class="blue active"><a href="#">Active</a></li> 
    <li class="green active"><a href="#">Active</a></li> 
    <li class="red active"><a href="#">Active</a></li> 
    </ul> 
</nav> 

我會用這個CSS （注意鏈接在一起的CSS類，例如：.blue.active）

nav li a, 
nav li a:hover, 
nav li a:active { 
    background: #999; 
    border-bottom: 3px solid #48a9c0; 
} 

nav li.active a, 
nav li.active a:hover, 
nav li.active a:active { 
    background: #323637; 
} 

nav li.blue a, 
nav li.blue.active a { 
    border-bottom-color: #48a9c0; 
} 
nav li.green a, 
nav li.green.active a { 
    border-bottom-color: #56c93d; 
} 
nav li.red a, 
nav li.red.active a { 
    border-bottom-color: #a54e49; 
}