怎么新建MySQL数据库

发布时间:2022-08-24 作者:admin
阅读:272
这篇文章主要介绍“CSS :focus伪类的应用场景有什么,怎样用”的相关知识,下面会通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“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伪类的应用场景有什么,怎样用”的介绍了,感谢各位的阅读,希望这篇文章能帮助大家解决问题。如果想要了解更多知识,欢迎关注群英网络,小编每天都会为大家更新不同的知识。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

二维码-群英

长按识别二维码并关注微信

更方便到期提醒、手机管理

7*24 全天候服务

售前 400-678-4567

售后 0668-2555666

售后 400 678 4567

信息安全 0668-2555 118

域名空间 3004329145