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>

相关推荐