CSS中關於focus偽類的使用執行個體詳解

來源:互聯網
上載者:User
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"鍵,遍曆所有的可獲得焦點的元素,使其獲得焦點;

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.