当前位置：Gxlcms > css > CSS中关于focus伪类的使用实例详解

CSS中关于focus伪类的使用实例详解

时间：2021-07-01 10:21:17 帮助过：75人阅读

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伪类的使用实例详解的详细内容，更多请关注Gxl网其它相关文章！

CSS中关于focus伪类的使用实例详解

示例一

示例二

人气教程排行