很多人在给页面元素设计样式时忽略了它们的状态，只考虑了用户使用鼠标操作，忘记了用户也许是用键盘操作。请用 :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. WebBench----简洁优美的网站压力测试工具

    [root@c webbench]# webbench -c 10 -t 20 http://www.baidu.com/Webbench - Simple Web Benchmark 1.5Copy ...

  2. IIS设置文件 App_Offline.htm 网站维护

    在ASP.NET 2.0 站点根目录下,只要存在 App_Offline.htm 文件,那么所有对.aspx的请求都将转向App_Offline.htm .而且浏览器的地址栏显示的是所请求的.aspx ...

  3. JavaEE中为什么出现中文乱码？

    1.原因 客户端通过IE提交时用的默认编码是UTF-8,而当我们用Myeclipse的时候的服务端接受的时候用的是iso-8859-1 2.解决方法 服务端也用UTF-8编码 byte[] resul ...

  4. 005-Symbol、Proxy、Reflect

    1.Symbol:http://es6.ruanyifeng.com/#docs/symbol 2.Proxy:http://es6.ruanyifeng.com/#docs/proxy Proxy ...

  5. Angular学习笔记—创建一个angular项目

    开始项目前,你需要先安装node和npm,然后执行npm install -g @angular/cli安装Angular CLI. 如何安装node.js和npm npm使用介绍 1.安装angul ...

  6. 基于视觉反馈的步进电机X-Y平台控制

    关键词:步进电机.XY平台.视觉反馈 用途:工业自动化 文章类型:原理介绍.随笔纪念 @Author:VShawn(singlex@foxmail.com) @Date:2017-05-01 @Lab ...

  7. Java集合（1）：ArrayList

    Java容器类的用途是“保存对象”,分为两类:Map——存储“键值对”组成的对象:Collection——存储独立元素.Collection又可以分为List和Set两大块.List保持元素的顺序(有 ...

  8. c# Datagridview 设置单位格为编辑状态（in editing mode）

    private void dataGridView1_KeyDown(object sender, KeyEventArgs e) { if (e.KeyCode == Keys.Tab && ...

  9. springmvc pojo

    /** * Spring MVC 会按请求参数名和 POJO 属性名进行自动匹配, 自动为该对象填充属性值.支持级联属性. * 如:dept.deptId.dept.address.tel 等 */ ...

  10. 获取配置文件信息——configparser

    配置文件host.int格式如下: [host]product=xxxxxxxxxxtest=xxxxxxxxxx python 3.x代码如下: import os,configparser def ...