css：focus伪类的使用

时间 2019-11-16

标签 css focus 使用栏目 CSS 繁體版

原文原文链接

css中：focus伪类的使用，即给已获取焦点的元素设置样式javascript

示例一

<!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”键便可进入该连接地址；spa

　　在页面中也能够经过"Tab"键，遍历全部的可得到焦点的元素，使其得到焦点；code