css：focus伪类的使用

来源：懂视网责编：小采时间：2020-11-27 18:50:02

css：focus伪类的使用

css：focus伪类的使用:css中：focus伪类的使用，即给已获取焦点的元素设置样式示例一<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>:focus</title

推荐度：

点击下载本文 文档为doc格式

导读css：focus伪类的使用:css中：focus伪类的使用，即给已获取焦点的元素设置样式示例一<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>:focus</title

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"键，遍历所有的可获得焦点的元素，使其获得焦点；