层次选择器

目录

1 后代选择器

2  子选择器

3 相邻兄弟选择器

---

1 后代选择器

后代选择器：

body p{
        background: greenyellow;
}

    
    

  


p1
p1
p1

  

    
p4
  
  

    
p5
  
  

    
p6
  

浏览器翻译如下：

2  子选择器

/*子选择器*/

body>p{
background: greenyellow;
}

    
    

  


p1
p1
p1

  

    
p4
  
  

    
p5
  
  

    
p6
  

浏览器翻译如下：

3 相邻兄弟选择器

/*相邻兄弟选择器 ，只有一个，相邻（向下） */

.active+p{
background: #ad2342;
}

/*通用兄弟选择器，相邻（向上和向下） */

.active~p{
background: #ad2342;
}

    
    

  


p1
p2
p1

  

    
p4
  
  

    
p5
  
  

    
p6