伪类选择器 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*
             :link 能找到定义了超链接且未被访问的a元素
             */
            a:link{
                color: red;
            }
            /*
             :visited 能找到定义了超链接且已经被访问过的元素
             * */
            a:visited{
                color: yellow;
            }
            
            /*
             * :hover  能找到鼠标在其内部的元素
             */
            a:hover{
                color: green;
            }
            .div1{
                width: 100px;
                height: 100px;
                background-color: lightcoral;
            }
            .div1:hover{
                background-color: gray;
            }
            
            .div2{
                width: 200px;
                height: 200px;
                background-color: gray;
            }
            .div3{
                width: 50px;
                height:50px;
                background-color: green;
            }
            .div2:hover>.div3{
                background-color: red;
            }
            /*
             * :active 能找到鼠标在其上面且按下不松开的元素
             */
            .div1:active{
                background-color: palegoldenrod;
                width: 500px;
                height: 500px;
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
        <!--
            4个伪类选择器   伪类/类（class）
            ：link   :visited  :hover   :active
            
            伪类选择器和类选择器的比较
            1.两者都可以找到多个元素
            2.类选择器在实用之前需要人为的设置class值，而伪类选择器直接使用，不需要设置对应的值，系统已经几乎为所有的元素事先添加好了伪类的属性值，我们可以直接使用。
        -->
        
        <a href="http://www.baidu.com">baidu</a>
        <a href="###">凸凹转</a>
        <div class="div1"></div>
        <div class="div2">
            <div class="div3"></div>
        </div>
        
        <!--
            注意：
            如果将来要给某个元素设置以上4个伪类选择器的多个，请注意书写顺序
            link->visited->hover->active
            
            "爱恨"原则
            LoVe HAte
        -->
    </body>
</html>

 

posted @ 2021-01-21 17:39  明坤  阅读(52)  评论(0)    收藏  举报