一、基本选择器

• 通用选择器

  选择所有的元素,此处*为所有通配符

  * {
  				color: #0000FF;
    }
  

• 元素选择器

  p {
  				font-size: 18px;
  				font-weight: bold;
    }
  

• ID选择器

  #whit{
  				 color: red; 
  	 }
  

• 类选择器

  .wh{
  		        font-family: 华文新魏;
     }
  

• 分组选择器

  当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔

  .wh,#whit,p{
  				color: blueviolet;
  				/* 边框：边框粗细 边框风格 边框颜色 */
  				border: 1px solid #00FFFF;
  			}
  

• HTML代码

  	
  		 
  UZI
  		 
  55开
  		 
  刘某
  		 
  大司马
  		 
  段落标签
  		 行内
  	
  

二、层次选择器

• 后代选取器(以空格分隔)

  选择food类下面的所有li标签，包含子孙...

  	.food li{
  				border: 1px solid red;  框的宽度   边框线条类型  边框颜色
  	 } 
  

• 子元素选择器(以大于号分隔）

  选择food类下面的子标签为li

  	.food2 > li{
  				border: 1px solid red;
  	}
  

• 相邻兄弟选择器（以加号分隔）

  代码是从上向下运行的，所以相邻兄弟是指下面的一个元素

  	#d + span{
  				border: 1px solid red;
  	} 
  

• 普通兄弟选择器（以波浪线分隔）

  代码是从上向下运行的，所以普通兄弟是指下面的所有兄弟元素

   #newD ~ div{
  				border: 1px solid red;
  			}
  

• HTML代码

  	
  		 
  食物
  		 
  
  		     
  水果
  		         
  列表标签1
  		             
  香蕉
  		             
  苹果
  		             
  梨
  		         
  		     
  		     
  蔬菜
  		         
  列表标签1
  		             
  白菜
  		             
  油菜
  		             
  卷心菜
  		         
  		     
  		 
  		 
  		 
  
  		     
  水果
  		         
  列表标签1
  		             
  香蕉
  		             
  苹果
  		             
  梨
  		         
  		     
  		     
  蔬菜
  		         
  列表标签1
  		             
  白菜
  		             
  油菜
  		             
  卷心菜
  		         
  		     
  		 
  	
  	   span标签
  		
  
  		    相邻兄弟选择器1
  		    
  
  		        
  开心麻花
  		        
  贾玲
  		        
  宋小宝
  		    
  		
  		span标签
  		
  
  		    相邻兄弟选择器2
  		
  		
  
  		    相邻兄弟选择器3
  		
  		
  
  		    相邻兄弟选择器4
  		
  	
  
  		
  
  			普通兄弟选择器0
  		
  		
  
  		    普通兄弟选择器1
  		    
  
  		        
  开心麻花
  		        
  贾玲
  		        
  宋小宝
  		        
  沈腾
  		        
  王宁
  		    
  		
  		
  
  		    普通兄弟选择器2
  		
  		
  
  		    普通兄弟选择器3
  		
  		
  
  		    普通兄弟选择器4