僞類選擇器

時間 2019-11-20

標籤選擇器简体版

原文原文鏈接

僞類選擇器

標籤（空格分隔）：僞類選擇器css

經常使用的幾種僞類選擇器。html

沒有訪問的超連接a標籤樣式：code

a:link {
  color: blue;
}

訪問過的超連接a標籤樣式：htm

a:visited {
  color: gray;
}

鼠標懸浮在元素上應用樣式：圖片

a:hover {
  background-color: #eee; 
}

鼠標點擊瞬間的樣式：input

a:active {
  color: green;
}

nput輸入框獲取焦點時樣式：it

input:focus {
  outline: none;
  background-color: #eee;
}

hover選擇器在網頁中很是好用，若是是我鼠標懸浮的是父盒子，想讓父盒子的子盒子顯示出來，這種效果其實也能夠用hover選擇器。可是咱們要將hover選擇器和後代選擇器結合起來一塊兒用,下面是個例子，你們copy看效果，瞬間就明白,鼠標懸浮aaa上會顯示一張圖片。io

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        ul{
            list-style: none;

        }

        ul li{
            position: relative;
        }
        ul li img{
            display: none;
            position: absolute;
            top: -16px;
            left: 36px;
        }
        ul li:hover img{
            display: block;
        }
    </style>

</head>
<body>

    <ul>
        <li>
             aaaa
            <img class="original-img" src="https://i8.mifile.cn/b2c-mimall-media/4f036ae4d45002b2a6fb6756cedebf02.png" >
        </li>


    </ul>

</body>
</html>

例子二：ast

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>僞類選擇器</title>
    <!--僞類選擇器通常用在標籤上-->
    <style type="text/css">
        <!--沒有被訪問你的a標籤的樣式-->
        div ul li.item1 a:link{
            color:gray;


        }
        /*訪問事後的a的樣式*/
        .box ul li.item2 a:visited{
            color:yellow
        }
         /*鼠標懸停的時候樣式*/
         .box ul li.item3 a:hover{
            color:green;
        }
         /*鼠標點主的時候a標籤的*/
         .box ul li.item4 a:active{
            color:yellowgreen;
        }


    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li class="item1">
                <a href="#">張三</a>
            </li>
            <li class="item2">
                <a href="#">李四</a>
            </li>
            <li class="item3">
                <a href="#">王二</a>
            </li>
            <li class="item4">
                <a href="#">王二3</a>
            </li>
        </ul>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>僞類選擇器</title>
    <!--僞類選擇器通常用在標籤上-->
    <style type="text/css">
        <!--沒有被訪問你的a標籤的樣式-->
        div ul li.item1 a:link{
            color:gray;


        }
        /*訪問事後的a的樣式*/
        .box ul li.item2 a:visited{
            color:yellow
        }
         /*鼠標懸停的時候樣式*/
         .box ul li.item3 a:hover{
            color:green;
        }
         /*鼠標點主的時候a標籤的*/
         .box ul li.item4 a:active{
            color:yellowgreen;
        }
         /*選中第一個元素*/
        div ul li :first-child{
            font-size: 20px;
            color: red;


        }
        div ul li :last-child{
            font-size: 20px;
            color: yellow;


        }
        /*0，1，2，正常的從0開始,0表示沒有選中*/

        div ul li :nth-child(3){
            font-size: 20px;
            color: red;


        }

        /*表示選中全部的*/
        div ul li :nth-child(n){
            font-size: 20px;
            color: red;


        }
        
        div ul li :nth-child(2n){
            font-size: 20px;
            color: red;
        }
        
        div ul li :nth-child(2n-1){
            font-size: 20px;
            color: red;
        }
        /*隔幾個換色*/
        
        div ul li :nth-child(4n-1){
            font-size: 20px;
            color: red;
        }
        
        


    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li class="item1">
                1
                <a href="#">張三</a>
            </li>
            <li class="item2">
                2
                <a href="#">李四</a>
            </li>
            <li class="item3">
                3
                <a href="#">王二</a>
            </li>
            <li class="item4">
                4
                <a href="#">王二3</a>
            </li>
            <li class="item5">
                5
                <a href="#">王二3</a>
            </li>
            <li class="item6">
                6
                <a href="#">王二3</a>
            </li>
            <li class="item7">
                7
                <a href="#">王二3</a>
            </li>
        </ul>
    </div>

</body>
</html>

相關標籤/搜索

每日一句

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