JavaEE
鸿蒙应用开发
HTML&JS+前端
Python+大数据开发
人工智能开发
电商视觉设计
软件测试
新媒体+短视频
集成电路应用开发
C/C++
狂野架构师
IP短视频
前端培训：链接伪类控制超链接
更新时间:2022年08月09日16时24分 来源:传智教育 浏览次数:
定义超链接时，为了提高用户体验，经常需要为超链接指定不同的状态，使得超链接在点击前、点击后和鼠标悬停时的样式不同。在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、除了文本样式之外，链接伪类还常常用于控制超链接的背景、边框等样式。
最新资讯
0
分享到：
江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2024 All Rights Reserved 苏ICP备16007882号营业执照增值电信业务经营许可证出版物经营许可证
苏公网安备 32132202001156号