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

Posted 2023-03-06

【中文标题】如何使链接颜色与父 div 相同？

【英文标题】：How to make link colour the same as parent 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

【参考方案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;