css---3連接僞類與動態僞類

時間 2020-05-11

標籤 css 連接動態欄目 CSS 简体版

原文原文鏈接

連接僞類link：表示做爲超連接，並指向一個未訪問的地址的全部錨css

連接僞類不能夠加在div上html

<!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：表示做爲超連接，並指向一個已訪問的地址的全部錨ide

<!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的片斷標識符。spa

能夠利用target寫一個div切換code

<!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 ，移出:activehtm

<!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>

實際應用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。