1.后代选择器

html 结构

   <div class='father'>

       <p>小哥哥 小姐姐</p>

       <div>

           <p>小帅锅</p>

       </div>

   </div>

   <p>小可爱</p>

使用后代选择器格式

       .father p{

           color：red；

        }

        匹配的是"小哥哥  小姐姐" 和 "小帅锅"，因为它匹配的是从儿子及以后的后代

2.子代选择器

/* 需求：只让小可爱变红（不改变html结构）*/

html结构 <div class='father'>

            <p>小可爱</p>

            <div>

               <p>小山猫</p>

             </div>

          </div>

          <p>大熊猫</p>

CSS 子代选择器写法

          .father > p{

              color:red;

            }

          匹配的是'子代中最近 儿子'，不包含儿子以外的关系

3.并集选择器

 语法：选择器1，

      选择器2，

      选择器3 {

        css样式语句

        }

   注意：一个只能写一个选择器名字，多个选择器用逗号分隔

4.交集选择器

 /*需求：只让熊大变红（不能改变html结构）*/

html 结构

   <div class='red'>小熊熊</div>

   <p>熊二</p>

   <p class='red'>熊大</p>

交集选择器匹配写法

        p.red {   //先是满足匹配p标签，在满足.red类，同时满足则匹配

            color:red;

         }

注意：中间不能有空格或者分隔符，标签选择器必须写在类选择器的前面