CSS后代选择器与子元素选择器的区别

今天在看css基础的时候，发现了一个很有趣的事情，那就是 后代选择器 与 子元素选择器。

说来也惭愧，我以前一直以为，这俩是同一个东西，只是叫法不同而已，后来才发现，原来这俩是两个不同的东西。

后代选择器（descendant selector） 又称为包含选择器，可以选择作为某元素后代的元素。

子元素选择器（Child selectors） 选择作为某元素子元素的元素

看到这里，是不是觉得这俩作用差不多？嘿嘿~~~

重点就在于这俩的区别，我们直接以代码来展示看效果：

  
    
    
  
  
    

      
第一行
      
第二行
      

        
第三行
        
第四行
      
    
    

      
第一行
      
第二行
      

        
第三行
        
第四行
      
    
  

运行之后的效果

image

现在基本上可以看出区别来了吧，第一个红框框里的是 后代选择器 的效果，第二个红框框里的是 子代选择器 的效果。

后代选择器 会在指定元素的所有指定后代起作用，不管这个后代被嵌套了多少层，都会起作用，这个也是我们用的比较多的。

而 子元素选择器 则仅仅针对第一层起作用，也就是子代，如果被嵌套了，就不会起作用了。