CSS中4种关系选择器

元素(标签)之间的关系

父元素：直接包含子元素的元素

子元素：直接被父元素包含的元素

祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素

后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素

兄弟元素：拥有相同父元素的元素叫做兄弟元素

根据以上的关系，可以使用如下选择器

1:子元素选择器

作用：选中指定父元素的指定子元素

语法：父元素>子元素{}

例如：div>span{},#root>.s1{}

2: 后代元素选择器：

作用：选中指定元素内的指定后代元素

语法：祖先 后代

例如：div .rou{}

3:选择下一个兄弟(紧紧挨着我的)

语法：前一个+下一个

例子：p+span

4:选择下面所有的兄弟(前面的不选)

语法：兄～弟

例子：p～span

  
    
    
    
    
    
  
  
    

      我是超市

      我是零食区
      

        我是生鲜区
        肉类
      
      我是鞋包区

      我是洗护区
    
    

    我是超市外的小卖部