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"键,遍历所有的可获得焦点的元素,使其获得焦点;
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
长按识别二维码并关注微信
更方便到期提醒、手机管理