Question

我有以下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 here

谢谢！

Answer 1

您遇到的问题是a元素具有默认样式，该样式不会继承父元素的颜色。强制继承color属性：

a {
    color: #000; /* for browsers that don't support 'inherit' as a color value */
    color: inherit;
}

Answer 2

将此添加到您的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

Answer 3

将#links a { color: #000; }添加到您的CSS中以设置链接的样式（如果您希望此颜色为全局，则只需a { color: #000; }。）

Answer 4

试试这个

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

继承人documentation。

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

4 个答案: