Стилизация различных частей одной и той же ссылки

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 вы пытаетесь нацелить тег привязки, содержащийся в элементе с классом 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;
}