Html 设置同一链接的不同部分的样式

我不确定这是否可行，但我想对链接的1部分进行不同的样式设置，但在悬停时，它仍然作为链接的一部分，等等

解释一下,， 我得到了以下html：

<span class="link1">
<a href='http://www.google.com'>
Google
<span class="link2"> Link</span>
</a>
</span>

这将有望使一个链接，谷歌在红色和蓝色的链接，尽管他们是相同的链接

---

有什么建议吗？

.link2 a

不起作用，因为

.link2

中没有

a

。如果你成功的话，它会起作用的

.link1 a .link2 {
    color: blue;
}

---

您很接近，但正如@CharlotteDan所提到的，在第二个CSS类中，您试图将一个锚定标记作为目标，该锚定标记位于一个不存在的类

link2

的元素中

通过以下几点，您可以实现您的目标：

HTML

---

JSFIddle:

这会让人困惑，而且违反直觉。重点是什么？

.link1 a .link2 {
    color: blue;
}

<a href='http://www.google.com'>
    Google
    <span>Link</span>
</a>

a {
    color: #ff0000;
}
a > span {
    color: #00ff00;
}