css:focus伪类的使用

2018-06-24 01:58:30来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:浅谈script标签中的async和defer

下一篇:导航栏链接点击后跳转,新页面相应的链接添加颜色