css中:focus伪类的使用
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输入框进行了得到焦点时的样式的设置
示例二
<!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"键，遍历所有的可获得焦点的元素，使其获得焦点；
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
