HTML中单个a href链接中的多种样式答案

【问题标题】：Multiple styles within a single a href link in HTMLHTML中单个a href链接中的多种样式
【发布时间】：2019-12-08 08:24:35
【问题描述】：

我想要一个同时具有正常和粗体字重的链接。像这样：

[示例链接]

当我将鼠标悬停在链接的任何部分时，我希望整个链接文本的颜色发生变化。我试过了：

a:visited { color: #000000; }
a:hover { color: #808080; }

<a href="image.png">sample <strong>link</strong></a>

但是，问题是当我将鼠标悬停在它上面时，粗体部分不会改变颜色，而是保持黑色而不是变成灰色。我尝试使用带有指定悬停颜色而不是强标记的 css 类的跨度。虽然这适用于粗体文本，但只要鼠标悬停在链接的非粗体部分上，它就不会改变颜色。

解决这个问题的正确方法是什么？谢谢。

编辑：问题是我有 * { color: #000000; } 在 css 中。

【问题讨论】：

标签： html css

【解决方案1】：

它适用于整个链接文本。

清除浏览器历史记录
https://jsfiddle.net/elouanesbg/gefhcd0a/3/

a:visited { color: #000000; }
a:hover { color: #808080; }
<a href="image.png" >sample <strong >link</strong></a>

【讨论】：

【解决方案2】：

我试过这样。

a:visited { color: #000000!important; }
a:hover { color: #808080!important; }

【讨论】：