css---3链接伪类与动态伪类

链接伪类link：表示作为超链接，并指向一个未访问的地址的所有锚

链接伪类不可以加在div上

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--:link：表示作为超链接，并指向一个未访问的地址的所有锚-->
        <style type="text/css">
            a{
                text-decoration: none;
            }
            a:link{
                color: red;
            }
            #test:link{
                background: pink;
            }
        </style>
    </head>
    <body>
        <a href="#">点我点我点我</a>
        <div id="test">我是div啦</div>
    </body>
</html>
View Code

链接伪类visited：表示作为超链接，并指向一个已访问的地址的所有锚

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--:visited：表示作为超链接，并指向一个已访问的地址的所有锚-->
        <style type="text/css">
            a{
                text-decoration: none;
            }
            a:link{
                color: blue;
            }
            a:visited{
                color: red;
            }
        </style>
    </head>
    <body>
        <a href="#">点我点我点我</a>
    </body>
</html>
View Code

链接伪类target：代表一个特殊的元素，这个元素的id是URI的片段标识符。

                            可以利用target写一个div切换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--:target 代表一个特殊的元素，这个元素的id是URI的片段标识符。--> 
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 300px;
                height: 200px;
                line-height: 200px;
                background: black;
                color: pink;
                text-align: center;
                display: none;
            }
            :target{
                display: block;
            }
        </style>
    </head>
    <body>
        <a href="#div1">div1</a>
        <a href="#div2">div2</a>
        <a href="#div3">div3</a>
        <div id="div1">
            div1
        </div>
        <div id="div2">
            div2
        </div>
        <div id="div3">
            div3
        </div>
    </body>
</html>
View Code

动态伪类  ：移入:hover ，移出:active

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #test:hover{
                color: pink;
            }
            #test:active{
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="test">
            我是test
        </div>
    </body>
</html>
View Code
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            a{
                text-decoration: none;
                color: black;
                display: block;
            }
            a:hover{
                font-size:24px;
                /*color: red;*/
            }
            
            a:link{
                font-size:48px;
                /*color: pink;*/
            }
            a:visited{
                /*font-size:96px;*/
                /*color: deeppink;*/    
            }
        </style>
    </head>
    <body>
        <a href="#1">我是第一个a标签</a>
        <a href="#2">我是第二个a标签</a>
        <a href="#3">我是第三个a标签</a>
        <a href="#4">我是第四个a标签</a>
        <a href="#5">我是第五个a标签</a>
        <a href="#6">我是第六个a标签</a>
    </body>
</html>
实际应用

 

posted @ 2019-10-30 11:42  distant-遥远  阅读(286)  评论(0)    收藏  举报