CSS3----伪元素和伪类选择器----伪元素选择器 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
            /* div{
                height: 200px;
                background: #BBFFAA;
            }
            div:empty{
                background: red;
            } */
            
            /* .wrap::after{
                content: "";
                display: block;
                width: 200px;
                height: 200px;
                background-color: #BBFFAA;
            } */
            
            .wrap{
                width: 500px;
                height: 200px;
                margin: 0 auto;
                text-align: center;
            }
            .wrap::first-letter{
                color: red;
                font-size: 3.125rem;
                font-weight: bold;
            }
            .wrap p::selection{
                background-color: red;
            }
            
        </style>
    </head>
    <body>
        <!-- <div></div>
        <div>scond</div>
        <div></div>
        <div>third</div> -->
        
        <div class="wrap">
            <p>鲁迅，原名周树人</p>
            <p>你们找鲁迅和我周树人有什么关系</p>
        </div>
    </body>
</html>

::after
::before
::firstLetter
::firstLine
::selection 被选中的元素

posted @ 2021-07-12 15:06  2237774566  阅读(49)  评论(0)    收藏  举报