"アクティブ"クラスのテキストの色

Question

私はナビゲーションバーを持っていて、li要素の "subactive"クラスでマークされたアクティブなページが必要です。 HTMLとCSSはここにあります：http://jsfiddle.net/a4hBz/

私はCSSの.subactiveセレクタで色を使用しますが、ブラウザでは無視されます。

Answer 1

CSSのスタイルを "重さ" かによるところが大きいのですそれ。 ID 常には、標準のタグ名、クラス名または疑似クラスよりも多くの出現率を持っています。簡単な解決策は、アンカークラスで、他の標準要素と同じように、「アクティブな」スタイリングを適用して特定のものにすることです。基本的には：

.subactive a 

はそれがあなたのスキーマのために動作しない場合、あなたには、いくつかの他の方法をクラスにで#sidenavを回す、または回避策もするかのいずれか必要があります

#sidenav .subactive a 

になるはずです。

---

ところで、私が以前に言及したのは、スタイルのspecificityです。それが現在立っているとして、あなたのスタイルはそうのような重量を量る：

(a * 1000) + (b * 100) + (c * 10) + d 

勝利数が最も多いのスタイル：

#sidenav a    a=0, b=1, c=0, d=1 -> specificity = 0,1,0,1 
.subactive a   a=0, b=0, c=1, d=1 -> specificity = 0,0,1,1 
#sidenav .subactive a a=0, b=1, c=1, d=1 -> specfiicity = 0,1,1,1 

はほとんどこのように考えることもできます。

Answer 2

どちらか!imporatantを追加します。

.subactive a 
{ 
    color: #fff!important; 

    /**/ 

} 

または定義のspecificityを増やす：

​​

Answer 3

私が必要でない場合、私は！importantを使用しません。それは私が

#sidenav a:hover, #sidenav .subactive a:link 

にライン

#sidenav a:hover, .subactive a 

を交換し、

.subactive a 
{ 
    color: #fff; 
    background-color: #034676; 
} 

を使用していないようです、それ以下のコードを削除します動作させるために

作業例を確認してください。http://jsfiddle.net/a4hBz/1/