示例一

<!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"键，遍历所有的可获得焦点的元素，使其获得焦点；

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 【CSS-进阶之元素：focus伪类模拟点击事件】 css伪类的说明以及使用(css事件) 关于使用css伪类实现小图标 css伪类与伪元素 css伪选择器使用总结——css中关于伪类和伪元素的知识总汇 CSS中的伪类 CSS伪类 a标签伪类link，hover，active，visited，focus区别伪类link,hover,active,visited,focus的区别 css中伪类和伪元素的区别