详细解读CSS链接属性——Web前端系列学习笔记

Posted 2021-10-01 来老铁干了这碗代码

在实际开发中，网页中的链接有四种状态，具体如下所示：

a:link：超级链接的初始状态。
a:hover：把鼠标放上去时悬停的状态 。
a:active ：是鼠标点击时。
a:visited：是访问过后的状态。

这四种状态的排序有一个有趣的规则——LoVe HAte原则，即按照link、visited、hover、active的顺序进行设置。改变超链接的示例代码如下所示。

/*对全站有链接的文字颜色样式为color:#333; 并无下划线*/
a{color:#333;text-decoration:none; }
/*对鼠标放到超链接上文字颜色样式变为color:#CC3300;
并文字链接加下划线text-decoration:underline;*/
a:hover {color:#CC3300;text-decoration:underline;}