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偽類的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!