CSS 基础 选择器的使用汇总

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;
         }
注意：中间不能有空格或者分隔符，标签选择器必须写在类选择器的前面