如何使链接颜色与父 div 相同？答案

【问题标题】：How to make link colour the same as parent div?如何使链接颜色与父 div 相同？
【发布时间】：2014-06-06 20:56:43
【问题描述】：

是否有一个简单的规则可以用 CSS 编写，以使所有链接采用它们所在的 div 中选择的标准字体颜色，但是当它们悬停时变为蓝色并且当它们被单击时不会永久更改颜色。

我只希望它们在悬停时亮起，否则保持不变，唯一出现此问题的div 是下面的那个。

.textundergrey {
    height: 140px;
    width: 950px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    font-family: "OpenSans Light", Arial, serif;
    font-size: 20px
}

【问题讨论】：

标签： css hyperlink hover

【解决方案1】：

如果您希望链接与 div 具有相同的颜色，您应该使用 color:inherit; 并在悬停时变为蓝色，您应该使用：

a:hover{
    color:blue;
}

此外，使用此代码的链接在单击时不会改变颜色。

试试：

HTML：

<div id="yellow"><a href="#">Yellow</a></div>
<div id="red"><a href="#">Red</a></div>

CSS：

a{
    color:inherit;
}
a:hover{
    color:blue;
}
#yellow{
    color:yellow;
}

#red{
    color:red
}

DEMO

编辑（来自 cmets）

要删除下划线，只需使用text-decoration:none;

DEMO2

【讨论】：

完美！如何停止下划线？
10/10 谢谢！如果我知道如何使它成为正确答案，我会添加它。

【解决方案2】：

使用inherit 属性：

a {
    color: inherit !important ;
}

【讨论】：

【解决方案3】：

防止它们在悬停时改变颜色

a:hover{

}

为了防止它们在点击时改变颜色

a:active{

}

您可以使用上面的代码将它全局应用到特定的类：

.textundergrey a:active{

}

要为特定类中的链接着色，请使用：

.textundergrey a{
    color: black;
}

【讨论】：

有没有办法让链接与文本的其余部分颜色相同？

【解决方案4】：

.parent_div a{
    color:red;
}
.parent_div a:hover{
    color:blue;
}

【讨论】：