找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 文档 工具 设计
查看: 184|回复: 0

html标签a的伪类link,hover,active,visited,focus的区别及顺序

[复制链接]

2万

主题

1249

回帖

2万

积分

超级版主

教育辅助界扛把子

附加身份标识
精华
1
热心
7
听众
1
威望
48
贡献
14329
违规
0
书币
50008
注册时间
2020-4-8

论坛元老灌水之王

发表于 2020-6-27 01:06 | 显示全部楼层 |阅读模式
例一:

[HTML] 纯文本查看 复制代码
/*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>


例二:

[HTML] 纯文本查看 复制代码
/*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。
Great works are not done by strength, but by persistence! 历尽艰辛的飞升者,成了围剿孙悟空的十万天兵之一。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号


免责声明:
本站所发布的第三方软件及资源(包括但不仅限于文字/图片/音频/视频等仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢某程序或某个资源,请支持正版软件及版权方利益,注册或购买,得到更好的正版服务。如有侵权请邮件与我们联系处理。

Mail To: admin@cdsy.xyz

QQ|Archiver|手机版|小黑屋|城东书院 ( 湘ICP备19021508号-1|湘公网安备 43102202000103号 )

GMT+8, 2024-11-23 17:37 , Processed in 0.047761 second(s), 28 queries .

Powered by Discuz! CDSY.XYZ

Copyright © 2019-2023, Tencent Cloud.

快速回复 返回顶部 返回列表