为相同链接的不同部分设计

Question

我不确定这是否有可能，但我想以不同方式对链接的一部分进行样式设计，但对于悬停时它仍然作为链接的一部分等

为了解释， 我有以下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

.link2 a不起作用，因为在.link2中没有a。如果您做了它的工作是

.link1 a .link2 { 
    color: blue; 
} 

Answer 2

你是接近，但由@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/