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

使用此

demo here

 <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>

如何通过定位锚标记中的类来更改锚标记中的颜色或文本？

3 个答案: