ネストされたセレクタのCSSスタイルのリンクカラー

Question

次の例では、リンク2が期待どおりに白く黒く表示されません。リンク2の色をコンテナタグにラッピングせずにどのようにスタイルできますか？

.text a{ 
color:#FFF; 
} 


.black{ 
color:#000; 
} 

<div class="text"> 
<a href="#">Link 1</a> 
<a href="#" class="black">Link 2</a> 
</div> 

Answer 1

あなたの第2のセレクタは、それを上書きする最初のものよりもより具体的にする必要がある：

.text a { 
color:#FFF; 
} 

.text a.black { 
color:#000; 
} 

<div class="text"> 
<a href="#">Link 1</a> 
<a href="#" class="black">Link 2</a> 
</div> 

Answer 2

それは、以前のセレクタがspecificityが高いので、白い出てきます。これの1つの解決策：

.black{ 
    color:#000 !important; 
} 

これは、あまりにも多すぎると、複雑な問題を引き起こす可能性があります。一般に、最良の解決策は、あまりにも多くのセレクタを避けようとすることです。リンクのデフォルトのスタイルを設定するセレクタが1つあり、クラスを使用して特定のリンクのみを変更できます。第1のセレクタがはるかに固有のものですので、それは白判明

a { 
    color: #fff; 
} 
.black { 
    color: #000; 
} 

Answer 3

、すなわち：たとえば、最後はクラスで任意の要素を取得するだけであるのに対し、クラス「テキスト」を持っている要素内のリンクを取得"黒"。

次の2つの方法でこの問題を解決することができます。

.text a.black { 
color:#000; 
} 

OR

.black{ 
    color:#000 !important; 
} 

する「重要なのは」クラス「黒」を持つ要素に与えるされている他のルールを上書きします。ここ

Answer 4

はあなただけではなく、クラスよりも、IDと黒にスタイルを適用するソリューションを働いている：他の人のよう

.text a{ 
color:#FFF; 
} 


#black{ 
color:#000; 
} 

<div class="text"> 
<a href="#">Link 1</a> 
<a href="#" id="black">Link 2</a> 
</div> 

Answer 5

言及している「」タグのためのあなたの前のセレクタがより特異的であるため、それは白い出てきますあなたの "黒い"クラス。

二つの選択肢がここにあります

は、より具体的に：

.text a{ 
color:#FFF; 
} 


.text a.black { 
color:#000; 
} 

<div class="text"> 
<a href="#">Link 1</a> 
<a href="#" class="black">Link 2</a> 
</div> 

それとも、あなたは可能性が私たちのルール "重要！"：

.text a{ 
color:#FFF; 
} 


.black{ 
color:#000!important; 
} 

<div class="text"> 
<a href="#">Link 1</a> 
<a href="#" class="black">Link 2</a> 
</div> 

私が強く最初に助言しますしかし、実際の問題がどこにあるのかを把握するまでは、「！important」はすばやく修正することができます。未来のためにあなたを台無しにするので、 "重要な"規則を乱用しないでください - それを私に信頼してください！

これはあなたの質問にお答えします。良い一日を過ごしてください。

マイケル。