css选择器-基本

一、通配符选择器（＊）

 通配符选择器是用来选择所有元素

*{}

* {border:1px solid blue;} 

二、元素选择器(E)

li{color:#ccc;}

三、类选择器（.className）

.active{color:red;}

li.active{font-size:14px}; 

只对li标签里 的active类更改




.important.active{color:red;}
同时包含important类和active类 进行修改,注意中间不能有空格



四、id选择器（#ID）

  
  

   
   #first {color: #000;}
  
  

  
  

   
    
  
  

  
  


   
   

五、后代选择器（Ｅ Ｆ）

   
   

    
    
.parent .ul{background:yellow;}



     
     

      
      


     
     

     
     

      
      


     
     
类名为parent的元素下的所有ul的背景色为yellow






   
   

   
   

六、子元素选择器(E>F)

   
   子元素选择器只能选择某元素的子元素，其中E为父元素，而F为子元素，其中E>F所表示的是选择了Ｅ元素下的所有子元素Ｆ。这和后代选择器（Ｅ Ｆ）不一样，在后代选择器中Ｆ是Ｅ的后代元素，而子元素选择器Ｅ > F，其中Ｆ仅仅是Ｅ的
   
   子元素
   
   而已
   
   


  
  

  
  

   
   
   
   
.parent ul{background: yellow;}






    
    

     
     E>F的选择就只在子类，孙子就不生效，与E F 选择器的差别
    
    

七、相邻兄弟元素选择器(E + F)


EF两元素同一个父元素，而且Ｆ元素在Ｅ元素后面，且相邻，可以使用相邻兄弟元素选择器来选择Ｆ元素。
  
  

  
  

   
   
.first+.second{background: pink;}


    
    

     
     
     
     


    
    


    
    

     
     first类后面的
     
     紧跟着的second类的背景色pink
    
    



  
  

  
  


   
   

八、通用兄弟选择器（Ｅ 〜 Ｆ）

   
   
和相邻兄弟元素选择器类似，E和F元素是同一父元素，并且F元素在Ｅ元素之后，那（E ~ F ）选择器将选中所有Ｅ元素后面的Ｆ元素。

   
   


   
   
.first~.second{background: pink;}





      
      

       
       
      
      

      
      

       
       first类后面的所有的second类的背景色pink，注意与E+F区别
       
       


      
      



九、群组选择器（selector1,selector2,...,selectorN）
.first,.second,.third{background: pink;}



       
       

        
        


       
       

       
       

        
        


       
       
first 类和second类还有third类背景色同时变成pink，注意逗号别忘了





.