css - アンカータグ内のクラスをターゲットにして、アンカータグの色またはテキストを変更するにはどうすればよいですか？

Question

誰かが次のことが起こる理由を説明できますか？

<a href="#" class="test">Test</a>

<style type="text/css">
.test {
border: thin solid blue;
color: red;
}
</style>

これは境界線を作成するだけで、クラスを使用するときにテキストを赤くすることはありません。

ただし、これは、代わりにIDを使用するときにテキストを赤に変える場合に機能します。

<a href="#" id="test">Test</a>

<style type="text/css">
#test {
border: thin solid blue;
color: red;
}
</style>

idを使用しても機能するのに、クラスがテキストの色を変更しないのはなぜですか？

ありがとう！

Answer 1

これを使って

こちらのデモ

 <a href="#" class="test">Test</a>

 <style type="text/css">
a.test {
border: thin solid blue;
color: red;
}
</style>

Answer 2

この例を参照してください：http：//jsfiddle.net/mD5us/4/

<div>
    <a href="#" class="test">Test</a>
</div>

CSS

​body div a.test{
    color:yellow;
}
body div .test{
    color:brown;
}
body a.test{
    color:purple;
}
body .test{
    color: orange;
}
a.test{
    color:green;
}
.test {
    border: thin solid blue;
    color: red;
}

リンクは赤と思われるかもしれませんが、それが最も具体的な宣言であるため、実際には黄色になります。

Answer 3

スタイルタグを次のように変更してみてください。

<style type="text/css">
   a.test{
      border: thin solid blue;
      color: red;
   }
</style>