css_选择器 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <style>

        /*通用*/
        *{
            font-size: 30px;
        }

        p{
            color: #5fb57d;
        }

        /**/
        #p_id1{
            color: #b18621;
        }

        /*类*/
        .p_c1{
            color: #364e98;
        }

         /*# 后代选择器*/
        div p{
            background: #364e98;
        }

        /* 综合练习 */
        /*#id-001 .class-001 .class-003{*/
        /*    background: #fac237;*/
        /*}*/

        /*!* 子代 *!                        只筛选“儿子层”*/
        #id-001>.class-003{
            font-size: 40px;
        }

        #id-001{
            font-size: 50px;
        }

        /*并行*/

        #p,#p_id1{
            color: #4A154B;
        }

        /*比邻*/
        #id-001+p{
            color: red;
        }

    </style>
</head>
<body>

    <p id="p">hello p1</p>

    <div id="id-001">
        hello div
        <span>
            hello span
        </span>

         <p>hello pp1</p>
         <p class="class-003">hello pp2</p>

        <div class="class-001">hello dd
            <p class="class-003">ppppp</p>
        </div>

    </div>

    <p id="p_id1">pp</p>

    <p class="p_c1">hello p3</p>
    <p class="p_c1">hello p4</p>
    <p class="p_c1">hello p5</p>


</body>
</html>

 

posted @ 2020-06-09 22:41  zxy_ang  阅读(195)  评论(0)    收藏  举报