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輸入框進行了得到焦點時的樣式的設定
：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中文網其他相關文章！
