CSS 问题，控制两个连接显示不同的图片

页面上有两个连接，
我希望得到这样的效果，可以实现吗
开始的时候 链接A显示A.gif,链接B显示B.gif为背景色，
当鼠标停留在A链接上面的时候显示AHover.gif,鼠标停留在B链接上显示BHover.gif图片为背景色

CSS很弱的，如果只有一个连接我会控制，但是多个链接我就不知道了，会的帮帮忙
谢谢

---

CSS code:

.A a:link,a:active,a:visited{text-decoration:none; background:url(A.gif);}
.B a:link,a:active,a:visited{text-decoration:none; background:url(A.gif);}
/*链接若有ID可直接#id,无则用父层,现在假设你的形式是<div class="A"><a></a>*/
.A a:hover{background:url(AHover.gif);}
.B a:hover{background:url(BHover.gif);}
/*有些浏览器有相关hack,可goole下*/

---

css最重要是理解页面组织结构

---

谢谢回复

---

我定义了 如下的
#A a:link,a:active,a:visited{text-decoration:none; background:url(A.gif);}

#A a:hover{background:url(AHover.gif);}
但是我只给
<a  id="A" href="#">A </a> 但是不知道为什么页面上所有的链接背景图片都换了，我把鼠标放到A上，图片不改变，

我定义这样的
#A {text-decoration:none; background:url(A.gif);}
#A a:hover{background:url(AHover.gif);}
只有A链接图片是A.gif,但是鼠标移动到A上面仍然没有变化

---

up

---

样式还是用原来的
<div id="A"&