:focus -- CSS :focus 伪类,适用于已获取焦点的元素的样式

语法: :focus

CSS版本:CSS2

说明:

适用于已获取焦点的元素的样式,例如:表单的input输入框可以输入文字时、接受键盘事件时

客户端(浏览器)可以根据用户与其交互的动作改变其渲染效果,CSS为这种情况提供了三个伪类:hover、active、focus

上述三种伪类不是互斥的,一个元素同时可以适用其中的若干个

:focus伪类,适用于已获取焦点的元素的样式。当一个元素获取焦点时,证明它是可控制的,例如一个链接获取了焦点后可以通过按"回车"键激活链接。可以用键盘的Tab键的遍历页面中可以获取焦点的元素,可以参考HTML中的tabindex属性。如果虚线框环绕了一个链接元素,证明此链接元素获取了焦点

focus,中文"焦点"的意思

by: http://www.manongjc.com/article/1322.html

语法

:focus
a:focus
a.class:focus

示例

a:focus
{
color:lime;
background:red;
} <pre name="code" class="html">http://www.manongjc.com/article/1322.html

input:focus{color:yellow;background:blue;}

												

CSS :focus 伪类的更多相关文章

  1. css:focus伪类的使用

    css中:focus伪类的使用,即给已获取焦点的元素设置样式 示例一 <!DOCTYPE html> <html lang="en"> <head&g ...

  2. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  3. 关于css中伪类及伪元素的总结

    css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...

  4. 【CSS】伪类与伪元素

    一伪类 语法: selector : pseudo-class {property: value} 提示:伪类名称对大小写不敏感.    与 CSS类搭配使用 selector.class : pse ...

  5. 【CSS-进阶之元素:focus伪类模拟点击事件】

    先放上我们最终实现的效果 注:这里建议插入codepen(临时使用图片代替) 我们想要实现当点击某个元素时,显示一个tip浮动框. html: <div class="wrapper& ...

  6. css的伪类选择器的使用

    伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字 实例 说明 :link a:link 选择所 ...

  7. HTML&CSS基础-伪类选择器

    HTML&CSS基础-伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...

  8. CSS :first-child 伪类

    CSS :first-child 伪类  向元素的第一个子元素添加样式,示例如下:   例 1 - 匹配第一个 <p> 元素(第一个段落显示为红色) <style type=&quo ...

  9. 二.CSS的伪类

    CSS的伪类(Pseudo-classes)分为两种:UI伪类和结构化伪类,伪类一般用于向某些选择器添加特殊的效果,伪类选择符用"  : "进行标示,如果是“ ::  ” 表示CS ...

随机推荐

  1. sqlserver修改某列为行号

    UPDATE t_users  SET t_users.id=u.num1 FROM t_users INNER JOIN (SELECT row_number() over(order by id) ...

  2. scala中的=>符号的含义

    [声明]本帖的内容是copy来的,来源为stack overflow. It has several meanings in Scala, all related to its mathematica ...

  3. openstack(liberty):部署实验平台(三,简单版本软件安装 之cinder,swift)

    今天这里追加存储相关的部署,主要是Block和Object,为了看到效果,简单的部署在单节点上,即Block一个节点,Object对应一个节点. 读者可能会觉得我这个图和之前的两个post有点点不同, ...

  4. [原]Fedora 20的yum配置

    新装了一套Fedora 20操作系统,又要开始配置yum了.下面总结以下步骤: 1.下载国内比较快的yum源 推荐163的yum源,sohu的yum源也不错,我一般就装第一个,安装163 yum源主页 ...

  5. No Suitable Driver Found For Jdbc_我的解决方法

    转载自:http://www.blogjava.net/w2gavin/articles/217864.html      今天出现编码出现了No suitable driver found for ...

  6. 请使用-Xlint:deprecation重新编译

    [已解决]Android Studio编译OsmAnd出现警告:GeoPointParserUtil.java使用或覆盖了已过时的 API.有关详细信息请使用-Xlint:deprecation重新编 ...

  7. 23. Merge k Sorted Lists

    Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity. = ...

  8. 【转】VS2013 C#WinForm程序构造界面拖动控件NumericUpDown时"未响应“是有道词典惹的祸

    很久之前遇到过因为金山词霸和其他软件冲突导致的程序无响应的情况. 没想到今天情况重现,VS2013在可视化编辑NumbericUpDown控件的时候,又出现了”未响应“,发现又是有道词典惹的祸. 可见 ...

  9. 黄聪:wordpress在IIS8中设置默认编码(windows2012服务器)

    web.config中配置 <?xml version="1.0" encoding="UTF-8"?> <configuration> ...

  10. HDU Count the string+Next数组测试函数

    链接:http://www.cnblogs.com/jackge/archive/2013/04/20/3032942.html 题意:给定一字符串,求它所有的前缀出现的次数的和.这题很纠结,一开始不 ...