css中：focus伪类的使用，即给已获取焦点的元素设置样式

示例一

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>:focus</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        input:focus{

            background: #cbcbcb;

        }

    </style>

</head>

<body>

    <input type="text"/>

</body>

</html>

以上通过：focus给input输入框进行了得到焦点时的样式的设置

示例二

：focus使用于页面的导航栏时，代码示例如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>:focus</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        ul li{

            list-style: none;

            float: left;

            margin: 0 20px;

        }

        ul li a{

            text-decoration: none;

        }

        ul li a:focus{

            color: #ff290a;

        }

    </style>

</head>

<body>

    <ul>

        <li><a href="javascript:;">博客园</a></li>

        <li><a href="javascript:;">首页</a></li>

        <li><a href="javascript:;">联系</a></li>

        <li><a href="javascript:;">管理</a></li>

    </ul>

</body>

</html>

补充：

　　当元素获取到焦点之后，若该元素是一个有效的链接，则通过“Enter”键即可进入该链接地址；

　　在页面中也可以通过"Tab"键，遍历所有的可获得焦点的元素，使其获得焦点；

css：focus伪类的使用的更多相关文章

  1. CSS :focus 伪类

    :focus -- CSS :focus 伪类,适用于已获取焦点的元素的样式 语法: :focus CSS版本:CSS2 说明: 适用于已获取焦点的元素的样式,例如:表单的input输入框可以输入文字 ...

  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. 信息安全：Token

    ylbtech-信息安全:Token Token(计算机术语) 在计算机身份认证中是令牌(临时)的意思,在词法分析中是标记的意思. 1.令牌返回顶部 1.令牌 (信息安全术语) Token, 令牌,代 ...

  2. 四 akka学习 四种多线程的解决方案

    http://blog.csdn.net/chenleixing/article/details/44044243 四种多线程的解决方案

  3. mysql5.5换成mysql8.0

    由于在建表钟发现有些语句就是录不进去,研究发现是因为5.5版本过低导致,就想换到5.7版本,结果一看8.0都出了,据官方说明8.0要比5系列快2倍网上,遂直接换成8.0了,不过这个过程真的心累. 1. ...

  4. 按钮交互loading ---- 转圈圈 加载

    按钮loading状态自定义选项(功能): 可以在元素上添加 data-am-loading 来设置选项: spinner 加载动画图标,适用于支持 CSS3 动画.非 input 元素,写图标名称即 ...

  5. [转]对 td 使用 overflow:hidden; 无效的几点错误认识

    转载:http://www.cftea.com/c/2010/12/UVBUCD0J888L2XPQ.asp 一.是 td 的原因. 其实这关 td 什么事呢?div 也是一样的,看示例: <d ...

  6. pow()函数的精度问题

    妈蛋这个坑了我大半个小时都想不出个原因..后来看到pow的定义才想起,数据类型很重要啊.. 1.底数用常量,指数用整型 #include <stdio.h> #include <ma ...

  7. 反射（type和assembly）

    这里简要介绍type和assembly 自定义特性 为了理解编写自定义特性的方式,应了解一下在编译器遇到代码中某个应用自定义特性的元素时,该如何处理. [AttributeUsage(Attribut ...

  8. tcpdump的使用总结

    1. 监视所有发送到主机hostname的数据: tcpdump -i eth0 dst host hostname 2. 监视指定主机和端口的数据包(接收或发出的telnet包): tcpdump ...

  9. c++中调用python脚本提示 error LNK2001: 无法解析的外部符号 __imp_Py_Initialize等错误的解决方法

    最近项目中需要实现一个服务器宕机后短信提醒的功能,个人觉得在使用Python 写http请求这块很方便,发短信这块就使用了python,但是c++程序中调用这个脚本时,编译不通过,提示如下错误: er ...

  10. AnimationCurve

    http://blog.sina.com.cn/s/blog_471132920101f8nv.html 说明:关于animationCurve的使用总结1 创建,可以新建脚本,创建animation ...