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. fabnacii数列

    Fibonacci数 时间限制:3000 ms | 内存限制:65535 KB 难度:1 描述 无穷数列1,1,2,3,5,8,13,21,34,55...称为Fibonacci数列,它可以递归地定义 ...

  2. 绝对路径VS相对路径

    绝对路径:不必赘述,就是从盘符开始写直到找到你所需要的文件为止,把所有的目录写完整即可.但是在做网站的时候绝对不推荐用绝对路径,因为不可能服务器中的路径和在做设计时候所用的电脑的路径一致,也不可能说在 ...

  3. [poj2342]Anniversary party树形dp入门

    题意:选出不含直接上下司关系的最大价值. 解题关键:树形dp入门题,注意怎么找出根节点,运用了并查集的思想. 转移方程:dp[i][1]+=dp[j][0];/i是j的子树 dp[i][0]+=max ...

  4. python中出现 IndentationError:unindent does not match any outer indentation level

    python中出现IndentationError:unindent does not match any outer indentation level 今天在网上copy的一段代码,代码很简单,每 ...

  5. 区块链：基于Hyperledger Fabric的 java 客户端开发（java sdk /java api server/java event server）

    fabric针对java 开发的部分支持不是很友好.基于目前较为稳定的fabric 1.4版本,我们封装了一个java sdk,apiserver,eventServer 封装java sdk的主要目 ...

  6. uoj#213. 【UNR #1】争夺圣杯（单调栈）

    传送门 我们枚举每一个元素,用单调栈做两遍计算出它左边第一个大于它的位置\(l[i]\)和右边第一个大于它的位置\(r[i]\),那么一个区间以它为最大值就意味着这个区间的左端点在\([l[i]+1, ...

  7. [Xcode 实际操作]六、媒体与动画-(4)使用CoreImage框架更改图片的色相

    目录:[Swift]Xcode实际操作 本文将演示如何使用CoreImage框架,调整图片的色相. 通过调整图像的色相,使图像产生暖色效果. 在项目导航区,打开视图控制器的代码文件[ViewContr ...

  8. IT兄弟连 Java语法教程 Java语言的跨平台特性

    什么是平台 Java是可以跨平台的编程语言,那么首先我们需要知道什么是平台,通常我们把CPU与操作系统的整体称为平台. CPU大家都知道,是计算机的大脑,它既负责思维运算,又负责计算机中各种零部件的命 ...

  9. 剑指Offer的学习笔记（C#篇）-- 数字在排序数组中出现的次数

    题目描述 统计一个数字在排序数组中出现的次数. 一 . 题目分析 该题目并不是难题,但该题目考察目的是正确的选择合适的查找方法.题目中有一个关键词是:排序数组,也就是说,该数组已经排好了,我一开始直接 ...

  10. JDBC连接数据以及详细的ResultSet结果集解释

    一.数据库连接 (前面为jdbc的其他参数,文章下部分为ResultSet详解) ResultSet rs = st.executeQuery(sqlStr) 1. java的sql框架支持多种数据库 ...