CSS :focus 伪类
:focus -- CSS :focus 伪类,适用于已获取焦点的元素的样式
语法: :focus
CSS版本:CSS2
说明:
适用于已获取焦点的元素的样式,例如:表单的input输入框可以输入文字时、接受键盘事件时
客户端(浏览器)可以根据用户与其交互的动作改变其渲染效果,CSS为这种情况提供了三个伪类:hover、active、focus
上述三种伪类不是互斥的,一个元素同时可以适用其中的若干个
:focus伪类,适用于已获取焦点的元素的样式。当一个元素获取焦点时,证明它是可控制的,例如一个链接获取了焦点后可以通过按"回车"键激活链接。可以用键盘的Tab键的遍历页面中可以获取焦点的元素,可以参考HTML中的tabindex属性。如果虚线框环绕了一个链接元素,证明此链接元素获取了焦点
focus,中文"焦点"的意思
by: http://www.manongjc.com/article/1322.html
语法
:focus
a:focus
a.class:focus
示例
a:focus
{
color:lime;
background:red;
} <pre name="code" class="html">http://www.manongjc.com/article/1322.html
input:focus{color:yellow;background:blue;}
CSS :focus 伪类的更多相关文章
- css:focus伪类的使用
css中:focus伪类的使用,即给已获取焦点的元素设置样式 示例一 <!DOCTYPE html> <html lang="en"> <head&g ...
- CSS中伪类及伪元素用法详解
CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...
- 关于css中伪类及伪元素的总结
css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...
- 【CSS】伪类与伪元素
一伪类 语法: selector : pseudo-class {property: value} 提示:伪类名称对大小写不敏感. 与 CSS类搭配使用 selector.class : pse ...
- 【CSS-进阶之元素:focus伪类模拟点击事件】
先放上我们最终实现的效果 注:这里建议插入codepen(临时使用图片代替) 我们想要实现当点击某个元素时,显示一个tip浮动框. html: <div class="wrapper& ...
- css的伪类选择器的使用
伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字 实例 说明 :link a:link 选择所 ...
- HTML&CSS基础-伪类选择器
HTML&CSS基础-伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...
- CSS :first-child 伪类
CSS :first-child 伪类 向元素的第一个子元素添加样式,示例如下: 例 1 - 匹配第一个 <p> 元素(第一个段落显示为红色) <style type=&quo ...
- 二.CSS的伪类
CSS的伪类(Pseudo-classes)分为两种:UI伪类和结构化伪类,伪类一般用于向某些选择器添加特殊的效果,伪类选择符用" : "进行标示,如果是“ :: ” 表示CS ...
随机推荐
- Google Play开发者账号注册与失败申诉攻略
Google Play开发者账号注册与失败申诉攻略 这篇文章我在网上找了好久,是在Google play进行开发者账号注册方法,介绍的很详细.现在分享一下.[原文地址] 为了方便开发者们注册谷歌的官方 ...
- 【java】serialVersionUID作用
serialVersionUID适用于Java的序列化机制.简单来说,Java的序列化机制是通过判断类的serialVersionUID来验证版本一致性的.在进行反序列化时,JVM会把传来的字节流中的 ...
- 股票自用指标 boll 菜刀
BI:=(H+L+O+C)/; BOL:EMA(BI,N); UPPER:BOLL+N1*STD(CLOSE,N); LOWER:BOLL-N1*STD(CLOSE,N); MA1:MA(CLOSE, ...
- 【springBoot】springBoot返回json的一个问题
首先看下面的代码 @Controller @RequestMapping("/users") public class UserController { @RequestMappi ...
- 【Linux】系统 之 Load
一.查看系统负荷 在Linux系统中,我们一般使用uptime命令查看(w命令和top命令也行).你在终端窗口键入uptime,系统会返回一行信息.这行信息的后半部分,显示"load ave ...
- 单元测试(junit使用)
1.测试的对象是一个类中的方法. 2.导入jar包. 3.单元测试方法时候,测试方法命名规则为 public void 方法名(){},注意:测试类不能命名为public class Test{},T ...
- VMware和CentOS7安装和配置
准备工作: 下载: 1.VMware-workstation-full-10.0.0-1295980 2.CentOS-7-x86_64-DVD-1511.iso 安装: 1.VMware-works ...
- 【Java】PrettyTime
package test; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.D ...
- C++14使用std::integer_sequence展开tuple作为函数的参数
元组是一种长度固定的允许有不同类型元素的集合,根据元素的个数不同又分别称作一元组.二元组.三元组等.C++11中标准库增加了一个叫std::tuple的类模板,用于表示元组. 下面的代码演示了使用C+ ...
- java中四种引用类型(转)
今天看代码,里面有一个类java.lang.ref.SoftReference把小弟弄神了,试想一下,接触java已经有3年了哇,连lang包下面的类都不了解,怎么混.后来在网上查资料,感觉收获颇多, ...