a:link、a:visited、a:hover、a:active怎么用啊

Posted 2023-04-24

参考技术A 你的意思应该是 多个a标签需要使用不同的 动态样式是吧；

第一种:
给a标签一个id或者class，然后在css里给id或class使用伪类
<a id="xxx" href=.....></a> 或者 <a class="xxx" href=....></a>

css: xxx:link xxx:active xxx:visited xxx:hover

不同的a，给一个不同的id或者class，这样就可以不一样了，如果有部分是一样的，那么就使用相同的class； 但是记住id只能使用一个元素上； 虽然在ie里将id跟class一样使用不会显示错误，但是是不符合网w3c的html标准的

第二种：
如果这些a标签不属于同一层的，意思是 a不在同一个容器下；比如一个a在 <div id="aaa">里面 ，另一个a在<div id="bbb">里面；

那么你可以这样写css： #aaa a:link; #aaa a:active ....#bbb a:link; #bbb a:hover; 这表示这个a是在#aaa这个容器下的a；也就特定了这个a了；这样也可以做到不同a不同样式；

这两种方法是在不同情况下应用的； 一般第二种情况是 在一个容器下的a全部使用相同样式，例如导航；那么就用第二种，这样代码量更小； 如果一个页面的a全部使用相同样式，那么直接定义a； 如果每个a使用不同样式，那么使用id；如果不在同一容器下的几个a使用相同样式，那么使用class；一句话，什么方式可以在效果相同的情况下让css代码量更小；就选择什么方法

a:link,a:visited,a:hover,a:active

１：解释

link:连接平常的状态

visited:连接被访问过之后

hover:鼠标放到连接上的时候

active:连接被按下的时候

详细的：　
:hover版本：CSS1/CSS2　 兼容性：IE4+ NS4+
语法：
Selector : hover { sRules }
说明：
设置对象在其鼠标悬停时的样式表属性。
在CSS1中此伪类仅可用于a对象。且对于无href属性（特性）的a对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。
目前IE5.5+仅支持CSS1中的:hover。

:active版本：CSS1/CSS2　 兼容性：IE4+
语法：
Selector : active { sRules }
说明：
设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。
在CSS1中此伪类仅可用于a对象。且对于无href属性（特性）的a对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。并且:active状态可以和:link以及:visited状态同时发生。
目前IE5.5+仅支持CSS1中的:active。

:link版本：CSS1　 兼容性：IE4+ NS4+
语法：
Selector : link { sRules }
说明：
设置a对象在未被访问前的样式表属性。
IE3将:link伪类的样式表属性作用于visited伪类。
默认值由浏览器决定。
对于无href属性（特性）的a对象，此伪类不发生作用。

:visited版本：CSS1　 兼容性：IE4+ NS4+
语法：
Selector : visited { sRules }
说明：
设置a对象在其链接地址已被访问过时的样式表属性。
IE3将:link伪类的样式表属性作用于visited伪类。
默认值由浏览器决定。定义网页过期时间或用户清空历史记录将影响此伪类的作用。
对于无href属性（特性）的a对象，此伪类不发生作用。

２:hover和a:visited书写顺序的重要性

css中关于超链接的四个属性一般正常顺序为：link，visited，hover，active，即
a:link
a:visited
a:hover
a:active