css复杂选择器

1.父子选择器/派生选择器 不一定非要标签，用其他也能代替

 <div>  
 <strong>      
 <em>123</em>  
 </strong>
 </div>
 <em>234</em> 
 
 div strong em {    background-color: red;} 

2.直接子元素选择器 只选择有直接关系的

 <div>  
<em>1</em>    
<strong>       
 <em>2</em>    
 </strong>  
 </div> 
 
 div>em{    background-color: red;} 

 <section>    
 <div>      
 <p>        
 <a href="">          
 <span></span>      
 </a>      
 </p>      
 <ul>        
 <li>          
 <a href="">            
 <span>              
 <em>1</em>            
 </span>         
  </a>          
  <p></p>       
   </li>       
    <li></li>      
    </ul>    
    </div>   
     <a href="">      
     <p>        
     <em>2</em>      
     </p>      
     <div></div>    
     </a>  
     </section> 
     
 section div ul li a em{    background-color: red;} 

3.并列选择器 不加空格
同样的标签看权重大小，权重一样后面覆盖前面

 <div>1</div>  
 <div class="demo">2</div>  
 <p class="demo">3</p> 
 
 div.demo{    background-color: red;} 

4. 分组选择器 用逗号隔开

 <em>1</em>  
 <strong>2</strong>  
 <span>3</span>
 
 em,strong,span{    background-color: red;}