HTML5基本伪类

最新推荐文章于 2022-02-10 21:37:00 发布

Mr_White01

最新推荐文章于 2022-02-10 21:37:00 发布

阅读量1.2k

点赞数

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/Mr_White01/article/details/72859994

版权

html5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.hover伪类

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .div1{
                height: 50px;
                width: 100px;
                border: 1px solid black;
                text-align: center;

            }
            .div1 span{
                line-height: 50px;

            }
            /*span:hover{
                color: white;
            }*/
            .div1:hover{
                background: deepskyblue;
            }
            .div1:hover span{
                color: white;
            }
            /*.span1{
                padding: 10px 30px;
                border: 1px solid;
                background: deepskyblue;
            }
            .span1:hover{
                color: white;
                background: yellow;
            }*/
        </style>
    </head>
    <body>
        <!--<span class="span1">你很皮</span>-->
        <div class="div1">
            <span>你是真的皮</span>
        </div>
    </body>
</html>

2.a标签的四个伪类

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            a{
                font-size: 36px;
                text-decoration: none;
            }
            /*love hate\*/
            /*未使用连接*/
            a:link{
                color: red;

            }
            /*已使用连接*/
            a:visited{
                color: green;
            }
            /*鼠标覆盖*/
            a:hover{
                color: blue;
            }
            /*已选择的连接*/
            a:active{
                color: yellow;
            }
        </style>
    </head>
    <body>
        <a href="http://www.baidu.com">百度一下</a>
    </body>
</html>