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;
         }
注意：中間不能有空格或者分隔符，標籤選擇器必須寫在類選擇器的前面