HTML / CSS - 悬停链接颜色

Question

我在CSS中编写了这段代码; 这使得我网站上的所有链接都是白色的，当它们徘徊时，它们会变成灰色。

a:link {color: #FFFFFF}
a:active {color: #383838}
a:visited {color: #FFFFFF}
a:hover {color: #383838}

这是我的网站的一部分，其链接是白色的，并在悬停时变成灰色。 我在网站上有四个不同的链接，用“|”分隔 。 我试图让每个链接保持白色，但只要它们在...上匹配我们的徽标就会改变为不同的HTML颜色。 （下面附有我链接的代码的HTML部分）。

第1页 | 第2页 | 第3页 | 第4页

我很乐意，如果有人可以帮我找出一个非常简单，简单的方法来制作每个链接，第1页，第2页，第3页和第4页，每个链接都会在它们徘徊时改变不同的HTML颜色。 基本上，一个规则或某些东西说明名为Page 1的链接需要在＃C7C025上悬停...时，名字第2页的链接需要被着色＃950285悬停在等等时......

非常感谢你提前!!

Answer 1

为您的链接提供ID：

<a id="page1" href="http://www.my-website09090909.com/page1">Page 1</a>
<a id="page2" href="http://www.my-website09090909.com/page1">Page 2</a>
<!-- .... -->

然后使用这个css：

#page1:hover { color: red; }
#page2:hover { color: blue; }
/* ... */

Answer 2

只需拥有一个父元素，并根据您的父元素尝试下面：

试试这个：

<div id="links">
<a href="http://www.my-website09090909.com/page1">Page 1</a> 
<b><span class="separator">|</span></b> 
<a href="http://www.my-website09090909.com/page2">Page 2</a> 
<b><span class="separator">|</span></b> 
<a href="http://www.my-website09090909.com/page3">Page 3</a> 
<b><span class="separator">|</span></b> 
<a href="http://www.mywebsite09090909.com/page4">Page 4</a>
</div>

而CSS是：

<style type="text/css">
#links a:nth-of-type(1){color:#009900;}
#links a:nth-of-type(1):hover{color:#ccc;}
#links a:nth-of-type(2){color:#006699 ;}
#links a:nth-of-type(2):hover{color:#ccc;}
#links a:nth-of-type(3){color:#990000;}
#links a:nth-of-type(3):hover{color:#ccc;}
#links a:nth-of-type(4){color:#FF00CC;}
#links a:nth-of-type(4):hover{color:#ccc;}
</style>