伪类选择器

时间 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>