这一次简单介绍下CSS3链接的使用
CSS链接的4种状态：
a:link 普通的、未被访问过链接时
a:visited 用户已经访问过链接时
a:hover 鼠标指针位于链接的上方时
a:active 链接被点击时
注意：当为链接的不同状态设置样式时，请按照以下次序规则：
- a:hover 必须位于 a:link 和 a:visited 之后
- a:active 必须位于 a:hover 之后
常见的链接的样式：
text-decoration属性大多用于去掉链接种的下划线
直接上代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css3链接</title> 6 <style type="text/css"> 7 a:link{ 8 /* 在没访问过该网页时的颜色 */ 9 color: blue; 10 /* 去除链接下面的下划线 */ 11 text-decoration: none; 12 /* 链接的背景颜色 */ 13 background-color: white; 14 } 15 /* 曾经访问过该网页时的颜色 */ 16 a:visited{color:red;} 17 /* 光标移动到该链接上面时的颜色 */ 18 a:hover{color: aqua;} 19 /* 鼠标点击该链接时的颜色 */ 20 a:active{color: yellowgreen;} 21 </style> 22 </head> 23 <body> 24 <a href="https://www.bilibili.com/video/BV1Mx411m7fd?p=96">【极客学院】Web前端开发</a> 25 </body> 26 </html>
打开网页后的效果
这个是从未点击过链接的时候，此时链接下面本该有一条下划线的，这里是没有的
因为我们去除了链接下面的下滑线 text-decoration: none;
这里是我们把光标移动到链接上面（没有点击）时，链接颜色变为天蓝色（aqua）
这里是我们鼠标点击链接时（此时说还未松开左键）,链接变为黄绿色（yellowgreen）
点击链接后，进入视频教程页面，随后我们按下返回键，回到一开始的页面，这时，链接变为红色
划重点：这里我们如果再刷新页面，会发现页面上的链接颜色为红色，不是为蓝色，就算你关闭浏览器，
重新打开该HTML文件，链接的颜色也为红色，为什么呢？
因为我们之前是有点击过该链接的，浏览器是有历史记录的，所以链接肯定为红色
如果你想让链接变回蓝色，即处于从未被点击过的状态时，可以去清除浏览器的相关的历史记录
再回到链接所在的页面，这时链接重新变回蓝色
总结
这次写的内容也是短小精炼，理解起来应该也没啥难度，实操一下基本都懂
最后希望这篇简单的随笔能对你们有所帮助吧（=￣ω￣=）
没用就当看着玩啦[狗头]