CSS之动态伪类选择器

不想敲代码的夏夏

已于 2023-01-13 18:39:32 修改

阅读量747

点赞数

文章标签： css 前端

于 2023-01-13 18:29:32 首次发布

本文链接：https://blog.csdn.net/m0_64694079/article/details/128678145

版权

动态伪类选择器：包括:link、:visited、:hover、:active等一般用于a元素的状态，也可以设置div等元素的鼠标悬停或者激活状态，另外还有:focus元素，主要用于设置当元素获得焦点时的样式。

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf—8">
    <title>动态伪类选择器</title>
    <style type="text/css">
         /*链接未被访问的时候*/ /*注意查的是浏览器的记录*/
         a:link{
             color:yellow;
         }
         /*链接被访问过的时候*/
         a:visited{
             color:red;
         }
         /*鼠标悬停在链接上方的时候*/
         a:hover{
             color:black;
         }
         /*鼠标摁下的那一刻*/
        a:active {
            color:green;
        }
        /*定义当用户鼠标悬停在div上的样式*/
        div:hover{
            background-color: green;
        }
        /*设置当元素被激活的样式*/ /*判断是否被激活的标准是鼠标的点击*/
        button:active{
            background-color: deepskyblue;
        }
        /*设置当元素获得焦点时的样式*/
        input#user:focus{
            background-color: cyan;
        }
    </style>
</head>
<body>
    <label for="user">账号：</label>
    <input type="text" name="name" id="user">
    <p>
        点一下就变蓝
    </p>
    <button>按钮</button>
    <br />
    <div>
        御坂美琴在学园都市中仅有七名的超能力者（Level 5）中排名第三位，能力名为“电击使”，
        代号“超电磁炮”（能力名分为“官方的”、“能力者自己申请注册的”和“本人随意自称的”。
        美琴的话最开始被命名为电击使，后来自己申请改为超电磁炮），能够随意操纵十亿伏特高压电流、电磁波和磁力。
        她的能力在原作中有“電撃使い”和“発電能力”两种写法，虽然汉字写法不同，但是英文表记都是“Electro Master（エレクトロマスター）”。
    </div>
    <br />
    <p>
        御坂美琴在学园都市中仅有七名的超能力者（Level 5）中排名第三位，能力名为“电击使”，
        代号“超电磁炮”（能力名分为“官方的”、“能力者自己申请注册的”和“本人随意自称的”。
        美琴的话最开始被命名为电击使，后来自己申请改为超电磁炮），能够随意操纵十亿伏特高压电流、电磁波和磁力。
        她的能力在原作中有“電撃使い”和“発電能力”两种写法，虽然汉字写法不同，但是英文表记都是“Electro Master（エレクトロマスター）”。
    </p>
    <br />
    <a href="https://bilibili.com" target="_blank">欢迎访问哔哩哔哩</a>
</body>
</html>