天天看點
傳回

CSS僞類選擇器與僞元素選擇器

1.僞類選擇器

eg: a:link{}   a:visited{}   a:hver{}  a:activer{}  注意a标簽的四個屬性一定要按照順序寫，不能颠倒，簡單的記憶方法“lvha”

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>僞類選擇器</title>
    <style>
        div{width:100px;
            height:100px;
            margin:100px auto;
            border:1px solid blueviolet;
        }
        div a{
            display: block;
            width:50px;
            height: 50px;

        }
        div a:link{background:white}
        div a:visited{background: blue}
        div a:hover{background:red;}
        div a:active{background:black;}
        
    </style>
</head>
<body>
    <div>
        <a href="" target="_blank" rel="external nofollow" ></a>
    </div>
</body>
</html>

2.僞元素選擇器

eg:(::afer      ::before)（注意：在使用僞元素選擇器時屬性中一定要加上content:'';即使空值也要加上，然後使用定位。）

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>僞元素選擇器</title>
    <style>
    div{width:100px;
        height: 100px;
        background:springgreen;
        margin:100px auto;
        position: relative;
    }
    div::after{
        content:'11';
        width:20px;
        height:20px;
        border-radius:50%;
        background:red;
        color:sienna;
        position:absolute;
        top:-10px;
        right:-10px;
    }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>
HTML+CSS
上一篇: 僞類選擇器 僞元素選擇器_僞類選擇器簡介
下一篇: 超連結僞類，節點僞類，結構僞類 的選擇器

繼續閱讀