HTML / CSS - 悬停链接颜色

Question

我在我的 CSS 中编写了这段代码；这会使我网站上的所有链接变成白色，当它们悬停在上面时，它们会变成灰色。

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

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

Page 1 | Page 2 | Page 3 | Page 4

如果有人可以帮助我找出一种非常简单的方法来制作每个链接（第 1 页、第 2 页、第 3 页和第 4 页），当它们悬停在它们上时，每个链接都会更改不同的 HTML 颜色，我会很高兴的。基本上，一条规则或其他内容表明，当鼠标悬停时，名为 Page 1 的链接需要被着色为 #C7C025……而名为 Page 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>