1.>（子选择器）

#a>p{　　 // 使用 > 号，让选择器选择id="a"的所有子类（直接子类）

     
    
      
11111111111111
    
      
22222222222222
    
      
        　　　　
       
333333333
 　　
      
      
     

结果：

 

2.+（相邻选择器）

h1+p，选择紧接在另一个元素后的元素，而且二者有相同的父元素。只会选择第一个相邻的匹配元素。

     
    
      
11111111111111
    
      
22222222222222
    
      
33333333333333
          
      
      
       
44444444444
    
      
     
h1+p        {            background-color:Red;             }

结果：

 

3.~(匹配选择器)

#b~p，匹配所有在#b元素之后的同级p元素。

 

     
    
      
11111111111111
    
      
22222222222222
    
      
33333333333333
    
      
      
       
44444444444
    
      
     

 

所有相匹配的P元素都被选择到。

 

 

结果：