版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gavincz/article/details/89539047
:link
定义:用来选中所有尚未访问的链接添加样式。
触发条件:用来规定当连接未被选中时(初始状态)的样式
兼容:全部兼容
:visited
定义:用来选中所有已被访问的链接添加样式。
触发条件:当链接已被访问时(最终状态)的样式
兼容:全部兼容
:hover
定义:当鼠标悬停在当前元素上时需要添加的样式
触发条件:当鼠标悬停在当前链接上时(浮于元素上方)的样式
兼容:全部兼容
:active
定义:用来选中所有被激活时链接的样式,通常是鼠标按下与松开之间的这段时间
触发条件:用来规定当前链接被激活时(按下/松开之间)的样式
兼容:全部兼容
举个栗子:
html代码:
<p><a href="javascript:;">这个链接在鼠标按下和松开的这段时间内会变成黄色,鼠标悬停时是红色</a></p>
<p><a href="http://www.bing.com" target='_blank'>这个链接在被访问后会变成紫色</a></p>
css代码:
a{
text-decoration: none;
font-size:24px;
font-weight: 900;
}
a:link{
text-decoration: none;
color: blue;
}
a:visited{
text-decoration: none;
color: purple;
}
a:hover{
text-decoration: none;
color: red;
}
a:active{
text-decoration: none;
color: yellow;
}
效果图: