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. Codeplus2017 12月赛——可做题1

    题目:https://www.luogu.org/problemnew/show/P4030 可以发现一个矩阵是巧妙矩阵当且仅当其所有二阶子矩阵都是巧妙矩阵: 将不巧妙的二阶矩阵计为1,维护二维前缀和 ...

  2. Lagom学习 六 Akka Stream

    lagom中的stream 流数据处理是基于akka stream的,异步的处理流数据的.如下看代码: 流式service好处是: A: 并行:  hellos.mapAsync(8, name -& ...

  3. 用于获取或设置Web.config/*.exe.config中节点数据的辅助类

    1. 用于获取或设置Web.config/*.exe.config中节点数据的辅助类 /**//// <summary> /// 用于获取或设置Web.config/*.exe.confi ...

  4. Runtime.getRuntime()

    1转自:https://www.aliyun.com/jiaocheng/849282.html 那就首先说点Runtime类吧,他是一个与JVM运行时环境有关的类,这个类是Singleton的.我说 ...

  5. ajax方法data参数用法的总结

    源文件分析: data的传递格式有两种:一是url字符串格式:一种是Json格式,格式分别如上 区别是:当传递的参数中包含 特殊字符如:&时,服务器解析这个参数时就会出错,而必须用encode ...

  6. 1、scala安装和基本语法

    一.安装Scala 1.安装 因为Scala是基于Java虚拟机,也就是JVM的一门编程语言. 所有Scala的代码,都需要经过编译为字节码,然后交由Java虚拟机来运行. 所以Scala和Java是 ...

  7. Django 中得ORM介绍和字段及字段参数

    ORM 介绍 ORM概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术. 简单的说 ORM 是通过使用 ...

  8. GitHub上最火爆！码代码不得不知的所有定律法则

    目录 介绍 定律 阿姆达尔定律 (Amdahl's Law) 布鲁克斯法则 (Brooks's Law) 康威定律 (Conway's Law) 侯世达定律 (Hofstadter's Law) 技术 ...

  9. 2014-10-4 NOIP模拟赛

    1.某种密码(password.*) 关于某种密码有如下描述:某种密码的原文A是由N个数字组成,而密文B是一个长度为N的01数串,原文和密文的关联在于一个钥匙码KEY.若KEY=∑▒[Ai*Bi],则 ...

  10. UVA - 1330 City Game

    InputThe rst line of the input le contains an integer K | determining the number of datasets. Next l ...