很多人在给页面元素设计样式时忽略了它们的状态,只考虑了用户使用鼠标操作,忘记了用户也许是用键盘操作。请用 :focus:active 标明它们的状态:

a:hover, a:active, a:focus { /* 改变它们的样式 */
color: #900;
}

  给用户做一件好事吧:下次当你开发一个网站,请用tab键遍历页面上所有的元素;如果你按动tab键后,页面没有任何聚焦点变化,请检查你的样式表,看看是否忘了给它们添加一些状态样式!

不要忘了 :focus 和 :active!的更多相关文章

  1. chrome控制台模拟hover、focus、active等状态,方便调试

    有时候需要调试一个网页,需要某些元素在hover.focus.active等状态. 比如hover,鼠标放到hover上,然后去控制台中找DOM,鼠标移开的时候元素就不是hover状态了. 此时可以使 ...

  2. :link,:visited,:focus,:hover,:active详解

    原文::link,:visited,:focus,:hover,:active详解 CSS 又名 层叠样式表,所谓层叠,就是后面的样式会覆盖前面的样式,所以在样式表中,各样式排列的顺序很有讲究.   ...

  3. CSS样式中visited,hover,active , focus这四个分别表示什么意思?

    CSS伪类用于向某些选择器添加特殊的效果.CSS又名层叠样式表,所谓层叠,就是后面的样式会覆盖前面的样式,所以在样式表中,各样式排列的顺序很有讲究. :link 与 :visited 在样式文件中的顺 ...

  4. a标签伪类link,hover,active,visited,focus区别

    <div id="content"> <h3><a class="a1" href="#">a标签伪类l ...

  5. BootStrap 关于input与btn的点击focus取消特效相关css

    取消btn按钮点击出现的外边框: .btn:focus, /*清除btn按钮点击出现的边框*/.btn:active:focus,.btn.active:focus,.btn.focus,.btn:a ...

  6. Web程序员常见的5个错误及解决方案

    我是那种脾气暴躁的web用户,但我认为正是如此才驱使我成为一名良好的web开发人员.我会对那些会导致使用网站变得困难的事情恼火,我认为事情越简单越方便越好.这里有五个常见的可用性错误,以及如何避免它们 ...

  7. 2010-2014总结 ____V_V____ hello-world

    .caret,.dropup>.btn>.caret{border-top-color:#000!important}.label{border:1px solid #000}.table ...

  8. [Ceoi2004]Journey

    题目描述 给出N个点,及你的出发点K. 接下来N-1行描述有关边的开始点,结束点,边长.保证图中不会有环 接下来给出数字J,代表你要走多少个点. 接下来J个数字,代表你要走过的点的编号.当然你可以自己 ...

  9. 深入理解CSS过渡transition

    × 目录 [1]定义 [2]过渡属性 [3]持续时间[4]延迟时间[5]时间函数[6]多值[7]阶段[8]触发[9]API 前面的话 通过过渡transition,可以让web前端开发人员不需要jav ...

随机推荐

  1. 七、H5 直播视频播放

    HTML5实现视频直播功能思路详解_html5教程技巧_脚本之家 https://m.jb51.net/html5/587215.html 七.H5 直播视频播放 移动端iOS和 Android 都天 ...

  2. responsive and functional programming RxJava

    RxJava由于使用了多个回调,一开始理解起来可能有点难度,其实多看几遍也就明白了,它的招式套路都是一样的: 首先就是创建Observable,创建Observable有很多种方式,这里使用了Obse ...

  3. eclipse中jar file与runnable jar file的区别

    直接运行 .class的方法     java  -cp .  com.network.Chat  , 不用加.class后缀 从eclipse中export 的jar file,仅仅是把.class ...

  4. I/O多路复用技术(multiplexing)是什么?

    作者:知乎用户链接:https://www.zhihu.com/question/28594409/answer/52763082来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...

  5. WCF引用 代码

    方法1: using (ChannelFactory<ICommonService> channelFactory = new ChannelFactory<ICommonServi ...

  6. SQL Server 加前导0

    declare @a int declare @b int set @a = 1 --需要显示的数字 set @b = 3 --显示位数 select right(cast(power(10,@b) ...

  7. phpcms 列表页中,如何调用其下的所有子栏目?

    {pc:content action="category" catid="$catid" num="99" order="list ...

  8. 【转】XML的几种读写

    XML文件是一种常用的文件格式,例如WinForm里面的app.config以及Web程序中的web.config文件,还有许多重要的场所都有它的身影.Xml是Internet环境中跨平台的,依赖于内 ...

  9. JS 中的substring ,substr ,slice,split,join

    substr with different arguments passed in: str.substring(startNum,stopNum ); str.slice(startNum,stop ...

  10. socketserver 源码剖析:

    socketserver 源码剖析[有图有真相]: (一).Socketserver 内部流程调用图:        详解:  1.self.RequestHandlerClass() = MyCla ...