你的位置:首页 > 软件开发 > 网页设计 > css:focus伪类的使用

css:focus伪类的使用

发布时间:2017-10-19 19:00:09
css中:focus伪类的使用,即给已获取焦点的元素设置样式示例一<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l ...

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伪类的使用

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。