更新时间:2021-03-09 来源:黑马程序员 浏览量:
定义超链接时,为了提高用户体验,经常需要为超链接指定不同的状态,使得超链接在点击前、点击后和鼠标悬停时的样式不同。在CSS中,通过链接伪类可以实现不同的链接状态,下面将对链接伪类控制超链接的样式进行详细地讲解。
与超链接相关的4个伪类应用比较广泛,这几个伪类定义了超链接的4种不同状态,具体如表1所示。
表1 超链接标签<a>的伪类
超链接标签的伪类 | 描述 |
---|---|
a:link{ CSS样式规则; } | 超链接的默认样式 |
a:visited{ CSS样式规则; } | 超链接被访问过之后的样式 |
a:hover{ CSS样式规则; } | 鼠标经过、悬停时超链接的样式 |
a: active{ CSS样式规则; } | 鼠标点击不动时超链接的样式 |
在实际工作中,通常只需要使用a:link、a:visited和a:hover定义未访问、访问后和鼠标悬停时的超链接样式。并且常常对a:link和a:visited应用相同的样式,使未访问和访问后的超链接样式保持一致。
注意:
1、使用超链接的4种伪类时,对排列顺序是有要求的。通常按照a:link、a:visited、a:hover和a:active的顺序书写,否则定义的样式可能不起作用。
2、超链接的4种伪类状态并非全部定义,一般只需要设置3种状态即可,如link、hover和active。如果只设定是2种状态,即link、hover来定义。
3、除了文本样式之外,链接伪类还常常用于控制超链接的背景、边框等样式。
【AI设计】北京143期毕业仅36天,全员拿下高薪offer!黑马AI设计连续6期100%高薪就业
2025-09-19【跨境电商运营】深圳跨境电商运营毕业22个工作日,就业率91%+,最高薪资达13500元
2025-09-19【AI运维】郑州运维1期就业班,毕业14个工作日,班级93%同学已拿到Offer, 一线均薪资 1W+
2025-09-19【AI鸿蒙开发】上海校区AI鸿蒙开发4期5期,距离毕业21天,就业率91%,平均薪资14046元
2025-09-19【AI大模型开发-Python】毕业33个工作日,就业率已达到94.55%,班均薪资20763元
2025-09-19【AI智能应用开发-Java】毕业5个工作日就业率98.18%,最高薪资 17.5k*13薪,全班平均薪资9244元
2025-09-19