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

 

 

上一篇:CSS animation 属性


下一篇:css中amimation 的用法