スタイル<a>リンク1時間異なるスタイル

Question

HTML：

<div id="content"> 
<p> some text </p> 
<a href="#"> some link aaa </a> 
<a href="#"> some other link bbb</a> 
</div> 

CSS：

私はCSSで "いくつかの他のリンクBBB" のスタイルが好き

#content a 
{ 
color: #red; 
text-decoration: underline; 
} 

.blue { color: #blue; } 

。しかし、私は他のリンクが異なる色になるのが好きです。私はクラスを追加しようとしましたが、運がありません。それはaによって上書きされます

どうすればよいですか？

なぜですか？

Answer 1

<div id="content"> 
<p> some text </p> 
<a href="#" class="f"> some link aaa </a> 
<a href="#" class="f2"> some other link bbb</a> 
</div> 

#content a.f 
    { 
    color: red; 
    text-decoration: underline; 
    } 

    #content a.f2 
    { 
    color: black; 
    text-decoration: underline; 
    } 

Answer 2

変化

.blue { color: blue; } 

#content a.blue { color: blue; } 

にEDIT：idは、それを妨げています。 IDが優先されます。
また、＃は無効です。

Answer 3

これは具体的な問題です。試してみてください.blueから#content a.blue

Answer 4

ここにはCSSの特異性の問題があります。 HTML Dogにはa good tutorialがあります。

記事から：

ネストされたセレクタのグループの実際の特異性は、いくつかの 計算になります。基本的には、すべてのidセレクタ（ "#whatever"）に の値を与え、すべてのクラスセレクタ（ ".whatever"）は10の値を、 すべてのHTMLセレクタ（ "whatever"）の値を1にします。それらはすべて upとhey presto、あなたは特異性の価値があります。