首頁 > 文章 > web前端 > CSS中關於focus偽類的使用實例詳解

CSS中關於focus偽類的使用實例詳解

黄舟原創: 2017-10-20 11:07:281806瀏覽

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中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css3動畫中圓形運動軌跡的實現下一篇：css3動畫中圓形運動軌跡的實現

看更多