爲相同鏈接的不同部分設計

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/