不要忘了 :focus 和 :active!
很多人在给页面元素设计样式时忽略了它们的状态,只考虑了用户使用鼠标操作,忘记了用户也许是用键盘操作。请用 :focus 和 :active 标明它们的状态:
a:hover, a:active, a:focus { /* 改变它们的样式 */
color: #900;
}
给用户做一件好事吧:下次当你开发一个网站,请用tab键遍历页面上所有的元素;如果你按动tab键后,页面没有任何聚焦点变化,请检查你的样式表,看看是否忘了给它们添加一些状态样式!
不要忘了 :focus 和 :active!的更多相关文章
- chrome控制台模拟hover、focus、active等状态,方便调试
有时候需要调试一个网页,需要某些元素在hover.focus.active等状态. 比如hover,鼠标放到hover上,然后去控制台中找DOM,鼠标移开的时候元素就不是hover状态了. 此时可以使 ...
- :link,:visited,:focus,:hover,:active详解
原文::link,:visited,:focus,:hover,:active详解 CSS 又名 层叠样式表,所谓层叠,就是后面的样式会覆盖前面的样式,所以在样式表中,各样式排列的顺序很有讲究. ...
- CSS样式中visited,hover,active , focus这四个分别表示什么意思?
CSS伪类用于向某些选择器添加特殊的效果.CSS又名层叠样式表,所谓层叠,就是后面的样式会覆盖前面的样式,所以在样式表中,各样式排列的顺序很有讲究. :link 与 :visited 在样式文件中的顺 ...
- a标签伪类link,hover,active,visited,focus区别
<div id="content"> <h3><a class="a1" href="#">a标签伪类l ...
- BootStrap 关于input与btn的点击focus取消特效相关css
取消btn按钮点击出现的外边框: .btn:focus, /*清除btn按钮点击出现的边框*/.btn:active:focus,.btn.active:focus,.btn.focus,.btn:a ...
- Web程序员常见的5个错误及解决方案
我是那种脾气暴躁的web用户,但我认为正是如此才驱使我成为一名良好的web开发人员.我会对那些会导致使用网站变得困难的事情恼火,我认为事情越简单越方便越好.这里有五个常见的可用性错误,以及如何避免它们 ...
- 2010-2014总结 ____V_V____ hello-world
.caret,.dropup>.btn>.caret{border-top-color:#000!important}.label{border:1px solid #000}.table ...
- [Ceoi2004]Journey
题目描述 给出N个点,及你的出发点K. 接下来N-1行描述有关边的开始点,结束点,边长.保证图中不会有环 接下来给出数字J,代表你要走多少个点. 接下来J个数字,代表你要走过的点的编号.当然你可以自己 ...
- 深入理解CSS过渡transition
× 目录 [1]定义 [2]过渡属性 [3]持续时间[4]延迟时间[5]时间函数[6]多值[7]阶段[8]触发[9]API 前面的话 通过过渡transition,可以让web前端开发人员不需要jav ...
随机推荐
- 转+总结!! 关于jsp页面取值方式
1. 前台往后台传值,通过提交表单,在后台有set,get方法,可以直接取到.如果通过request.getParameter(paramName) 去获取通过会报空指针异常. 其中requ ...
- 【POJ3615】Cow Hurdles 最短路,你若LCA,我仍不拦你。
NOIP2013货车运输.仅仅只是数据范围小了很多. 不到150s打完而且AC. . 额.当然.我写的是Floyd. 写LCA的真过分. #include <cstdio> #includ ...
- Pantone色卡——安全装备的面板、丝印及铭牌颜色设计参考
可以参考上传文件<Pantone色卡电子版下载>
- java要注意的问题3
十七.使用正则 正则表达式的结构摘录如下(来源: Oracle官网) 字符 x 字符x / 反斜杠 /0n 8进制值为0n的字符(0<=n<=7) /0nn /0mnn 8进制值为0m ...
- linq中将int类型转换为string类型,toString()报错
今天同事在调试程序的时候,报了一个不寻常的错误, “LINQ to Entities 不识别方法"System.String ToString()",因此该方法无法转换为存储表达式 ...
- C++白盒测试最佳实践课程,3个免费名额火热申请中,31号前截止申请...
C++白盒测试最佳实践课程,3个免费名额火热申请中,31号前截止申请...http://automationqa.com/forum.php?mod=viewthread&tid=2561&a ...
- JavaScript判断对象 是什么类型的.
// 这种方法不起作用 if (x == undefined) { // 作某些操作 } // 这个方法同样不起作用- if (typeof(x) == undefined) { // 作某些 ...
- gh-ost原理
gh-ost原理 一.三种模式架构图 1.连上从库,在主库上修改 这是gh-ost默认的工作模式,它会查看从库情况,找到集群的主库并且连接上去,对主库侵入最少,大体步骤是: 在主库上创建_xxx_gh ...
- Percona-Server-5.7.16 启动错误
基于:percona-server-5.7.16 启动报错: [root@monitor mysql]# ./bin/mysqld_safe --defaults-file=/data/config ...
- centos/linux扩容Swap分区
查看现在的swap容量 [root@node1 ~]# free -h total used free shared buff/cache available Mem: 15G 3.8G 2.1G 5 ...