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"鍵，遍歷所有的可獲得焦點的元素，使其獲得焦點；