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>