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. No overload for 'OnStartup' matches delegate 'System.Windows.StartupEventHandler'

    No overload for &apos;OnStartup&apos; matches delegate &apos;System.Windows.StartupEvent ...

  2. jQuery 防止相同的事件快速重复触发

    重复触发就是防止用户重复点击提交数据了,我们一般都是点击之后没反应会再次点击了,这个不但要从用户体验上来做好,还在要js或php程序脚本上做好,让用户知道点击是己提交服务器正在处理,下面我就整理从脚本 ...

  3. PCL推荐的命名规范(1)

    博客转载自:http://www.pclcn.org/study/shownews.php?lang=cn&id=209 文件命名 所有的文件名单词之间应该用下划线隔开,例 如unordere ...

  4. 【转】eclipse修改workspace

    [转]eclipse修改workspace 以下方法选其中一种 1.进入 Window > Preferences > General > Startup and Shutdown ...

  5. (二)搭建SSH环境

    一.struts 1.添加jar包: commons-fileupload-1.3.1.jar,[文件上传相关包] commons-io-2.2.jar, commons-lang-2.4.jar , ...

  6. 「一入 Java 深似海 」系列课程

    第一期 「一入 Java 深似海 」系列课程 - 第一期 第一节:Java 语言基础

  7. sqlserver2012——INTERSECT交查询

    1. select a.成绩编号,a.分数,b.姓名 From 成绩信息 a,学生信息 b ' 一般的查询 a.成绩编号,a.分数,b.姓名 From 成绩信息 a,学生信息 b ' order a. ...

  8. MVC动态生成的表单：表单元素比较多 你就这样写

    MVC动态生成的表单:表单元素比较多 你就这样写: public ActionResult ShoudaanActionResult(FormCollection from,T_UserM user) ...

  9. 在Visual Studio中编译Linux的一些问题

    相对路径: 在windows下,和当前文件同一个目录下的引用会这么写: #include "SubDirectory\header.h" 或者 #include "Sub ...

  10. codeforces786E ALT【倍增+最小割】

    方案二选一,显然是最小割,朴素的想法就是一排人点一排边点,分别向st连流量1的边,然后人点向路径上的边点连流量inf的边跑最大流 但是路径可能很长,这样边数就爆了,所以考虑倍增,然后倍增后大区间向小区 ...