伪类link,hover,active,visited,focus的区别

伪类link,hover,active,visited,focus的区别

例一:

/css/
a:link{
color: blue;
}
a:visited{
color: green;
}
a:hover{
color: red;
}
a:focus{
color:black;
}
a:active{
color: yellow;
}

/html/
<p><a href="#">click me</a></p>

例二:

/css/
input:focus{
background: yellow;
}
input:active{
background: red;
}

/html/
<input type="text" id="txt">

link表示链接在正常情况下(即页面刚加载完成时)显示的颜色。

visited表示链接被点击后显示的颜色。

hover表示鼠标悬停时显示的颜色。

focus表示元素获得光标焦点时使用的颜色,主要用于文本框输入文字时使用(鼠标松开时显示的颜色)。

active表示当所指元素处于激活状态(鼠标在元素上按下还没有松开)时所显示的颜色。

注:伪类的顺序应为link--visited--hover--focus--active。

原文出处:https://www.cnblogs.com/pcd12321/p/4457884.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。