怎样在同一个页面实现两个超连接样式

Question

请问一下各位高手,怎么在同一个页面里写两个不同的超连接样式,例如一个超连接是当鼠标经过时变蓝色,别一个是当鼠标经过时变红色,谢谢!

Answer 1

  试试这两种效果
<style type="text/css">
<!--a:hover {
text-decoration: none;
color:#FF9933
}#div a:hover{
padding: 2px;
border: 1px solid #C1CFE0;
background: #FBFBFC;
color:#00CC66;
}
-->
</style><p><a href="#">asdfkalsdkjf </a></p>
<p>&nbsp;</p><div id=div >
<p><a href="#">asdfklaskd flaksd f</a>  </p>
</div>

Answer 2

没有必要，你只要在定义样式时，定义多种就行了。 还可以在不同的容器里重定义你定义过的样式  例如 #div a:hover{  就是重定义id为 div 的层下的 链接的样式

Answer 3

css中 默认样式
A:link {
FONT-SIZE: 12px; COLOR: #0062c4; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
A:visited {
FONT-SIZE: 12px; COLOR: #0062c4; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
A:active {
FONT-SIZE: 12px; COLOR: #0062c4; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
A:hover {
FONT-SIZE: 12px; COLOR: #0062c4; LINE-HEIGHT: normal; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: underline
}
----------------------------------------------------------------------------------
另一种
.otherlink A:link {
FONT-SIZE: 14px; COLOR: #333333; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.otherlink A:visited {
FONT-SIZE: 14px; COLOR: #5f5f5f; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.otherlink A:hover {
FONT-SIZE: 14px; COLOR: #f95100; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.otherlink A:active {
FONT-SIZE: 14px; COLOR: #3e3e3e; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
---------------------------------------------------------------------------------
再一种
.otherlink1 A:link {
FONT-SIZE: 12px; COLOR: #333333; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.otherlink1 A:visited {
FONT-SIZE: 12px; COLOR: #5f5f5f; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.otherlink1 A:hover {
FONT-SIZE: 12px; COLOR: #0062c4; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: underline
}
.otherlink1 A:active {
FONT-SIZE: 12px; COLOR: #3e3e3e; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
-----------------------------------------------------------------------------

Answer 4

A:link { text-decoration: none;
color:#FF9933}
A:visited { FONT-SIZE: 12px; COLOR: #000000; TEXT-DECORATION: none }
A:hover { FONT-SIZE: 12px; COLOR: #000000; TEXT-DECORATION: underline }
.A1:link { FONT-SIZE: 12px; COLOR:#00a650; TEXT-DECORATION: none }
.A1:visited { FONT-SIZE: 12px; COLOR: #00a650; TEXT-DECORATION: none }
.A1:hover { padding: 2px;
border: 1px solid #C1CFE0;
background: #FBFBFC;
color:#00CC66;
}
<a href="#" class="A1">