CSS伪类伪元素 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类和伪元素选择器</title>
    <style type="text/css">
        .link{
        font-size: 30px;
        text-decoration: none;
        color:pink;
        }
        .link:hover{
            color: yellow;
            font-weight: bold;
        }
        /*伪类,相当于元素的默认属性,一直都有,但是一般不进行改动
            通常情况先弥补top塌陷bug和消除浮动bug的时候才会用到before和after
            hover是制作鼠标悬停效果
        */
        /*伪类常用的就只有hover 类名后用冒号:hover表示*/
        
        .box1, .box2{
            font-size:55px;

        }
        
        .box1:before{
            /*before 伪元素能够在标签前面添加内容, 其内容不可选中, 称之为 伪元素*/
            content: ".123";
            /*冒号分号一定要成对出现*/
            color:green;

        }        
        .box2:after{
            content: ".//";
            color:green;

        }


    </style>
</head>
<body>
    <a href="http://www.baidu.com" class="link">百度</a>
    <br /><br /><br /><br />
    <div class="box1">这是第一个div元素块</div>
    <div class="box2">这是第二个div元素块</div>
</body> 
</html>

 

posted @ 2019-08-13 15:52  Jrri  阅读(147)  评论(0)    收藏  举报