css：focus僞類的使用

時間 2020-01-08

標籤 css focus 使用欄目 CSS 简体版

原文原文鏈接

本文轉載於:猿2048網站css：focus僞類的使用javascript

css中：focus僞類的使用，即給已獲取焦點的元素設置樣式php

示例一

<!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輸入框進行了獲得焦點時的樣式的設置css

示例二

：focus使用於頁面的導航欄時，代碼示例以下：html

<!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>

補充： java

　　當元素獲取到焦點以後，若該元素是一個有效的連接，則經過「Enter」鍵便可進入該連接地址；網站

　　在頁面中也能夠經過"Tab"鍵，遍歷全部的可得到焦點的元素，使其得到焦點；spa

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。