一.关系选择器分类

• 后代选择器

• 子代选择器

• 相邻兄弟选择器

• 通用兄弟选择器

二.关系选择器详解

• 后代选择器

  定义

  选择所有被E元素包含的F元素，中间用空格隔开

  语法

  E F{
      属性: value;
      ...
  }

• 子代选择器

  定义

  选择所有作为E元素的直接子元素F，对更深一层的元素不起作用， 用>表示

  语法

  E>F {
      属性: value;
      ....
  }

• 相邻兄弟选择器

  定义

  选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元 素，只能向下选择

  语法

  E+F {
      属性: value;
      ....
  }

• 通用兄弟选择器

  定义

  选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开，只能 向下选择

  语法

  E~F {
      属性: value;
      ....
  }

二.实例

    
    
    
    
    


    
    
下面是后代选择器的展效果示：
    

        
我是无序标签
        

            

                
我是有序标签
                
哈哈~
            
        
        
我是无序标签
    
    
    
下面是子代选择器的展效果示：
    

        
我是段落1
        

            
我是段落2
        
        
我是段落3
    
    
    
下面是相邻兄弟选择器的展效果示：
    
我是h2标签1
    
我是h2标签2
    
    
下面是通用兄弟选择器的展效果示：
    
我是h3标签1
    
哈哈
    
我是h3标签2