CSS样式的状态hover、focus、active、link、visited详解
CSS 又名层叠样式表,是一种伪类用于向某些选择的容器添加特殊的效果,所谓层叠,就是后面的样式会覆盖前面的样式,所以不同的排列顺序可能会有不同的显示效果。下面介绍几个关于连接按钮效果的关键样式属性:
1 link控制未访问时的显示效果
2 hover鼠标悬停和划过时的显示效果
3 visited 访问过后的显示效果
4 active 控制按钮被点击时的显示效果。当所指定的元素处于激活状态(鼠标在元素上按下还没有松开)时所使用的样式;
5 focus 获得聚焦对象的元素,并设置聚焦时的显示效果。当元素获得光标焦点时使用的样式,主要用在文本框输入文字时使用;
link 与 visited 在样式文件中的顺序任意,相互之间没有影响。 而focus, hover,active这这三个的顺序有要求,乱放后可能会出现显示的效果与预想的不同,正常顺序为:focus -> :hover -> :active
link代表为访问链接的样式,所以只要你是超链接,且未被访问过,则链接都会按照你设定的样式显示,所以它的位置顺序无所谓。
visited代表链接访问后的样式,则链接一旦被访问,则之后它的样式就会是你所设置的visited样式
focus 代表的是获取焦点时的样式,有人说啥是获取焦点时的样式,可以通过tab键来查看,一旦链接获取了焦点,则它的样式就是你设置的focus样式
hover 代表的是你光标经过某一元素时的样式,如果将此样式放在:focus之后,则当链接获取焦点时,显示:focus样式,当光标经过此链接时,会显示hover的样式,而将其放在focus前,则当鼠标滑过时显示的时focus的属性,因为其特性被覆盖了。
active 代表元素被激活时的样式,也就是元素被按下时的样式,如果:active选择器与 :focus , :hover 调换位置,则显示的效果也会不同,因为排在后面的样式,会覆盖前面的样式。
ps:当我们单击元素时,会同时触发:active和:focus,最后将只能看到了:focus的效果 (鼠标是否松开都一样,将都只能看到)
————————————————
版权声明:本文为CSDN博主「筱筱2016」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/xiaoxiao20121314/article/details/81103500
CSS样式的状态hover、focus、active、link、visited详解相关推荐
- 伪类link,visited,hover,focus,active
CSS 又名 层叠样式表,所谓层叠,就是后面的样式会覆盖前面的样式,所以在样式表中, 各样式排列的顺序很有讲究. :link 与 :visited 在样式文件中的顺序可以随便放置.而focus, ho ...
- :link、:hover、:active和:visited的区别
前言 直到如今,前端一直都是我的弱项,想要总结自己前端都学了什么,可是真的想写的时候,却发现自己会的真的是好少.既然如此,就随性一点,想到哪里记到哪里吧. 首先,这四个选择器叫伪类选择器,一般用在a标 ...
- 【响应式Web前端设计】:link、:hover、:active和:visited的区别
:link.:hover.:active和:visited的区别? :link表示鼠标点击之前,也称为原始状态 :hover表示鼠标悬停状态 :active表示鼠标点击状态 :visited表示鼠标点 ...
- php中的文字排版问题,CSS布局中常用的文字排版相关属性详解
本篇文章给大家带来的内容是关于CSS布局中常用的文字排版相关属性详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS布局中常用的文字排版相关属性详解 一.设定文字字体.颜色.大 ...
- linux中的 ip addr 和 ip link命令详解
linux中的 ip addr 和 ip link命令详解 一.ip addr命令 我是使用的linux系统是redhat7.3,其它linux的相关操作大同小异(在这里不做赘述) 1.查看 (1). ...
- linux ln(link) 命令详解
linux ln(link) 命令详解 功能说明:连接文件或目录. 语 法:ln [-bdfinsv][-S <字尾备份字符串>][-V <备份方式>][--help][--v ...
- html页面的盒子边框怎么做的,HTML+CSS入门 用三层盒子结构实现多边框详解
本篇教程介绍了HTML+CSS入门 用三层盒子结构实现多边框详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 如果想给每个盒子加上美观的border,实现如下效果 如果 ...
- 【转】angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在使用 ...
- 线程状态,优先级,守护线程基础详解
线程状态,优先级,守护线程基础详解 线程状态 停止线程 线程休眠 线程礼让 线程强制执行 线程状态检测 线程的优先级 守护线程 线程同步 线程状态 创建状态(new 之后就是创建状态 就绪状态(调用s ...
最新文章
- jQuery给input CheckBox的值查询的一致就选中
- 在浏览器输入一个网址,按回车之后发生了什么?
- ajax 传参数 java后台接收
- Java面试题及答案,java入门书籍
- wap打包 本地化 hbuilder_秋收接近尾声 冰城开启秸秆打包、秋整地
- [UE4]控制台命令,生成机器人
- zabbix1.8.5安装
- 【java】数据流的读写
- 《移动平台开发实践》第1周作业
- Paip.论语义分析与语义搜索技术.attilax(艾龙)总结
- ARM处理器性能对比
- 【题解】【AcWing】1564. 哈希
- Ribo-seq的下游分析方法1-ORFquant以及RiboQC
- ESP32 nvs 加密
- java制作电子钢琴_java 设计 模拟钢琴 完整源码
- 唉,你说无语不无语!
- 上海大学电影学院计算机17,上海大学17级表演系女神集体曝光,有网红也有小明星...
- 20155305 2016-2017-2《Java程序设计》课程总结
- 重复造轮子,对此你的看法
- 剑指offer刷题笔记
热门文章
- java计算机毕业设计服装连锁店后台管理系统源码+mysql数据库+系统+lw文档+部署
- 图解华为云需求管理工具——CodeArts Req
- 360浏览器插件如何导出独立保存?插件文件夹在哪里找?
- 在计算机上写一封邮件的英文,一封邮件英文怎么写
- 403 Forbidden是什么意思?403 Forbidden错误解决方法
- java 编译war包_javaweb程序打包成war文件的步骤
- 解读领跑全国的区块链发展“北京方案”:设专项基金,构建开源生态
- 游戏发展基础--动画
- 信息系统基本知识(二)(兼顾第四版教程)
- 戴维营教育最新项目实战开发视频出炉:Swift、XMPP、SpriteKi...