Стилирование разных частей этой же ссылки

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

Это мы надеемся сделать ссылку, которая была Google в красном и L чернила в синем, несмотря на то, что они являются одной и той же ссылкой.

Любые предложения?

Answer 1

.link2 a не работает, потому что нет a в .link2. Это будет работать, если вы сделали это

.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/