html - 为同一链接的不同部分设置样式

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;
}

尽管它们是同一个链接，但希望这会生成一个链接，其中 Google 为红色，Link 为蓝色。

有什么建议吗？

Answer 1

你很接近，但正如@CharlotteDan 所提到的，在第二个 CSS 类中，你试图定位一个 anchor 标记，该标记保存在一个不存在的类 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/