无法使用CSS更改字体颜色?

3

I have the following HTML

<div class = "left">
<div id = "links">
<a href = "none" style = "text-decoration: none"><b>About</b></a>
<br>
<a href = "none" style = "text-decoration: none"><b>Principals</b></a>
<br>
<a href = "none" style = "text-decoration: none"><b>Contact</b></a>    
<br>    
</div>
</div>

以及CSS

.left {
       position: fixed;
       top: 0px;
       left: 0px;
       width: 30%;
       height: 100%;
       background-color: #8EE5EE;
       color: #000000;
      }
#links {
        position: relative;
        top: 40%;
        text-align: right;
        font-family: "Verdana", "Arial Black", sans-serif;
        font-size: 25px;
        color: #000000;
       }​

我的链接颜色应该是黑色,但它们显示为深蓝色。这段代码有什么问题吗?
在此处查看JSFiddle
谢谢!

#links标识的是div而不是div内部的链接(<a>)标签。通过改变颜色,你只是改变了div内文本的颜色,而不是锚点文本的颜色。下面的众多答案之一可以为您提供正确的解决方案。 - War10ck
4个回答

11
你遇到的问题是 a 元素有一个默认样式,该样式不会从父元素继承颜色。要强制继承 color 属性,请使用以下方法:
a {
    color: #000; /* for browsers that don't support 'inherit' as a color value */
    color: inherit;
}

5
将以下内容添加到您的css中:
#links a:link{
    color: #000;
}

您可以随后添加像...

#links a:visited{
    color: #000;
}
#links a:hover{
    color: #000;
}
#links a:active{
    color: #000;
}

要改变链接在不同状态下的颜色。

这里有一些相关阅读材料:http://www.w3schools.com/css/css_link.asp


2
#links a { color: #000; }添加到您的CSS中以样式化链接(或者如果您希望此颜色为全局,则只需使用a { color: #000; })。

1

试一下这个

#links a:link, a:hover, a:visited, a:active {
   color: #000000;
}

这里是一些文档

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接