我的班級拒絕將其規則應用於列表

Question

我有一個.active班級適用於當前頁面的li a。

但它不斷被我的造型主要navdiv overrode。

#nav ul li a:link, #nav ul li a:visited { 
    color: #BBBBBB; 
} 

#nav ul li a:hover, .active, #nav ul .active a:link, #nav ul .active a:visited { 
    border-bottom: red solid 2px; 
    padding-bottom: 4px; 
    color: #fff; 
} 

我試圖在第二條規則有一些變化，試圖廢黜第一，但沒有一個似乎工作。 （我最初沒有這個id，但是我知道id是級聯級以上的一個步驟）。也許我錯過了一些非常基本的東西，或者我的第一條規則愚蠢地超過了特定的規則？ （我似乎總是遇到了這種用鏈接的問題，特別是）

Answer 1

假設你有類似這樣的標記：

<div id="nav"> 
    <ul> 
    <li><a href="#">foo</a></li> 
    <li><a href="#">foo</a></li> 
    <li class="active"><a href="#">foo</a></li> 
    </ul> 
</div> 

你的CSS似乎工作正常。

見http://jsfiddle.net/X7eAw/1/

您可能需要添加

#nav ul li.active a

如果未施加active類強制特異性。然而，這個選擇器可能是矯枉過正的。

假設您的li元素上有active類。如果您將active應用於錨點，則規則應爲：#nav ul li a.active:link

Answer 2

可以防止在CSS得到重寫的樣式，通過使用重要的標記：

#nav ul li a:hover, .active, #nav ul .active a:link, #nav ul .active a:visited { 
    border-bottom: red solid 2px; 
    padding-bottom: 4px; 
    color: #fff !important; 
}