锚伪类link、hover、active、visited
戚云
锚点伪类
- 锚点链接的伪类主要针对于我们a标签样式进行设置，下面给出四个标签作用
- link标签：未被访问过的链接
- hover 应用于鼠标悬停到的元素
- active 应用于被激活的元素
- visited 应用于被访问过的链接
代码片：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试</title>
<style>
/*
link标签：设置未访问之前的颜色，效果跟直接设置a标签颜色相同
visited标签：只能设置字体颜色！！！！
hover标签：用于设置当鼠标经过或悬停时链接文本的样式
active标签：鼠标点击（按住不放）的时候该链接文本的样式
*/
a{
color:cadetblue;
}
a:visited{
color: #333333;
}
a:hover{
background-color: skyblue;
}
a:active{
width: 50px;
height: 50px;
background-color: tomato;
}
</style>
</head>
<body>
<a href="https://www.baidu.com/" target="_blank">百度</a>
<a href="https://zhidao.baidu.com" target="_blank">百度知道</a>
<a href="https://wenku.baidu.com" target="_blank">百度文库</a>
</body>
</html>
- 在使用以上四个标签时，要注意使用的顺序，大致使用顺序可以分以下两种：
- （1）link–>visited–>hover–>active或者visited–>link–>hover–>active
- link和visited的顺序可以改变，但是其他的不能改变
- 注意：visited标签只能是指链接文本的颜色！！！
- link标签在设置超链接样式时并不常用，可以直接通过设置a标签来控制访问之前的颜色
类似资料：