2

以下の例では、リンク 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>
4

5 に答える 5

3

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>
于 2012-04-18T11:49:15.517 に答える
0

前のセレクターの方が特異度が高いので白く出ます。これの1つの解決策：

.black{
  color:#000 !important;
}

ただし、使いすぎると複雑な問題が発生する可能性があります。一般に、最善の解決策は、セレクターが多すぎるのを避けることです。リンクのデフォルト スタイルを設定するセレクターを 1 つ用意し、クラスを使用して特定のリンクのみを変更します。例えば：

a {
  color: #fff;
}
.black {
  color: #000;
}
于 2012-04-18T11:50:01.227 に答える
0

最初のセレクターはより具体的であるため、白になります。つまり、クラス「テキスト」を持つ要素でリンクを取得しますが、最後のセレクターはクラス「黒」を持つ要素を取得するだけです。

これは、次の 2 つの方法で解決できます。

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

また

.black{
  color:#000 !important;
}

「重要」は、クラス「黒」の要素に与えられる他のルールを上書きします。

于 2012-04-18T11:52:16.210 に答える
0

これは、クラスではなくIDを使用してスタイルを黒に適用するだけの実用的なソリューションです:

.text a{
color:#FFF;
}


#black{
color:#000;
}

<div class="text">
<a href="#">Link 1</a>
<a href="#" id="black">Link 2</a>
</div>
于 2012-04-18T11:54:11.930 に答える
0

他の人が述べたように、「a」タグの以前のセレクターは「黒」クラスよりも具体的であるため、白く​​なります。

ここには 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>

または、「!important」ルールを使用できます。

.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" で簡単に修正できる場合があります。"!important" ルールを乱用しないでください。将来的に混乱するからです。信頼してください。

これがあなたの質問に答えることを願っています。良い一日を過ごしてください。

マイケル。

于 2012-04-18T11:55:18.493 に答える