粗体文本和常规文本的不同悬停链接颜色

Question

我知道这是一个愚蠢的问题，但是如何为粗体和常规文本设置不同的悬停链接颜色。

a:hover { color:#cccccc; }

<b>
<a href="google.com"> A Bold link</a> 
</b>

<p><a href="google.com"> A normal link</a> 

Answer 1

您应该使用不同的选择器。一个是b父母，另一个没有。  只要使用超链接周围的b标记实现粗体链接文本，这将起作用。

a:hover {
  color: #cccccc;
}
b > a:hover {
  color: #cccc00;
}

<b>
<a href="google.com"> A Bold link</a> 
</b>

<p><a href="google.com"> A normal link</a>

Answer 2

请添加此css：

b a:hover {
  color: #ff0000;
}
p a:hover {
  color: #008000;
}

Answer 3

你可以使用风格

a{ color: red; }
b a{ color: blue; }

<b>
    <a href="google.com"> A Bold link</a> 
</b>

<p><a href="google.com"> A normal link</a> 

建议观点：csstricks https://css-tricks.com/