码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-04-26 16:35:30      阅读:480      评论:0      收藏:0      [点我收藏+]

标签:

/*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>

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

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

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

focus表示元素获得光标焦点时使用的颜色,主要用于文本框输入文字是使用。例:

/*css*/
#txt:focus{
  background-color:red;
}

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

注一:此时的active等价于focus,显示的演的由active与focus的位置决定。

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

注三:链接用active,文本框用focus。

注四:active多于hover一起使用。

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

标签:

原文地址:http://www.cnblogs.com/pcd12321/p/4457884.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!