是否可以在css中使用多個鏈接樣式？

Question

這可能嗎？ 我看了遍谷歌，無法找到我正在尋找的答案。 這里的問題是：是否有可能讓我們說div標題中的文本有一個紅色的懸停，而頁腳中的div中的文本是否為白色懸停？

或者這是不可能的，你只能為整個文件設置1種風格嗎？

我希望我能很好地解釋它。

提前致謝！

Answer 1

如果你只是勾選它，你可以設置你想要的任意數量：

/* every a:hover has color red */
    a:hover { color: red; } 
/* #footer a:hover has color green. */   
    #footer a:hover { color: green; } 
/* Every link that has class ".ThisClass" will have yellow color */
    a.ThisClass:hover { color: yellow; }

Answer 2

這是非常可能的，就像任何其他元素一樣，您可以通過更具體的方式單獨設置它們。

如果你有這個HTML：

<div id="top">
    <a href="#">First link</a>
</div>

<div id="bot">
    <a href="#">Second link</a>
</div>

使用此CSS，您可以設置兩個鏈接的樣式：

a:hover {
    color: #000;
}

使用此CSS，您可以單獨設置它們的樣式：

#top a:hover {
    color: #f00;
}

#bot a:hover {
    color: #fff;
}

Answer 3

是的，這是可能的。

#header a:hover {
    color: #f00;
}

#footer a:hover {
    color: #0f0;
}

http://jsfiddle.net/wrygB/2/

您可能希望將其拆分，以便在其他地方使用相同的懸停。 在這種情況下你會這樣做：

.main:hover {
    color: #f00;
}

.sub:hover {
    color: #0f0;
}

然后你可以將一個main或sub類應用於任何元素以獲得懸停效果。

Answer 4

那么你只需選擇a：link所在的元素，然后應用這樣的樣式。

即

#header a:hover { color: red; }
#footer a:hover { color: white; }