设置相同链接的不同部分

Question

我不确定这是否可行，但我想以不同方式设置链接的1个部分，但是当它涉及到悬停等时仍然可以作为链接的一部分。

解释一下， 我有以下html：

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

和以下CSS：

.link1 a {
color: #ff0000; 
}
.link2 a {
color: #00ff00;
}

这有望建立一个链接，谷歌为红色，链接为蓝色，尽管它们是相同的链接。

有什么建议吗？

Answer 1

你很接近，但正如@CharlotteDan所提到的，在第二个CSS类中，你试图将一个锚点标记定位在一个不存在的类link2的元素中。

您可以通过以下方式实现您的目标：

HTML 的

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

CSS

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

JSFIddle：http://jsfiddle.net/udfUS/

Answer 2

.link2 a不起作用，因为a中没有.link2。如果你做到了它会起作用

.link1 a .link2 {
    color: blue;
}