css的属性选择器和伪类

AlisaClass 2020-06-10

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head>    <style>        /*[id=‘id1‘]{*/        /*    background: #fac237;*/        /*}*/        /*区分标签下选择*/        /*p[class=‘class1‘]{*/        /*    background: #5fb57d;*/        /*}*/        /*自造属性选择*/        /*[zxy]{*/        /*    background: #036ad2;*/        /*}*/        /*.class1{*/        /*    font-size: 45px;*/        /*}*/        /*.class2{*/        /*    background: #036ad2;*/        /*}*/        /*~=*/        /*[class~=‘class2‘]{*/        /*    background: #036ad2;*/        /*}*/        /*^  以谁开始 */        /*[class^=‘class1‘]{*/        /*    font-size: 45px;*/        /*}*/        /*^ 包含 */        /*[class*=‘s1‘]{*/        /*    font-size: 45px;*/        /*}*/    a:link{        color: red;    }     /* 悬浮时   */     a:hover{         color: yellow;     }     /* 点击链接时 */    a:active{        color: purple;    }    /*访问连接后*/    a:visited{        color: chartreuse;    }    /* 后面添加文本 */    p:after{        content: ‘ppp‘;        color: #fac237;    }    /*前面添加文本*/    p:before{        content: ‘kkk‘;    }    </style><body><!--&lt;!&ndash;    <div class="class1 class2">div1</div>                  # 有两个属性&ndash;&gt;class1 class2--><!--    <p class="class1">p1</p>-->    <div class="class1 class2">div1</div>    <p class="class1">p1</p><!--    <div class="class2" zxy="hh">div2</div>            # 自己造属性 zxy-->    <div class="class3">div3</div>    <div id="id1">id1</div>    <a href="https://www.baidu.com">百度</a></body></html>

相关推荐

somboy / 0评论 2020-05-13