first-child和first-of-type的区别

关于div:first-child

  
  // first-child
    
aa
    
bb
    
cc
    
dd
  

运行结果如下

first.png

我们发现字体全部都变成了红色。好像和我们预期想的有点不一样。来分析下，首先看最外面的class为parent的这个div元素，它的父元素body。我们知道 div:first-child。能够匹配的话要满足两个条件。 第一是div标签，第二是其div的父元素的第一个子元素。也可以换句话就是，我们先找到div标签，再看它是否是第一个子元素。因为一个元素一般都是有父元素的。都是写在 的内部嘛。此时我们就查看它是不是第一个子元素了。的确是第一个子元素。于是aa,bb,cc,dd的字体都为红色。里面的div标签就不需要看了。

  
  // first-child
    
aa
    
bb
    
cc
    
dd
  

first.png

为什么不用看，看这个效果就知道了。和上面的效果一样。
变化一下。

  
hello world
   // first-child
  

    
aa
    
bb
    
cc
    
dd
  

添加了h1标题。此刻效果如下。

添加h1标题.png

都没有颜色了。因为此时body的第一子元素，已经不是div标签了。不满足条件。

第二种情况 div:first-of-type

 

  
hellow world
  

   
aa
   
bb
   
cc
   
dd
  
  
ee

运行效果如下。

second.png

如果要匹配的话， 必须满足两个条件：第一是div标签，第二是第一个div标签。这也就是为什么h1标题和最后一个div里面字不变的原因。

.parent div:first-child

  

   
hellow
   
aa
    
ee
   
   
bb
   
cc
   
dd
  

我们先找到class为parent下的所有div标签，首先我们看第一个内容为aa的div标签，它的父元素即，class为parent，其firs child是h1标题。因而没有效果。我们再看内容为ee的div标签，它的父元素是class为aa的div元素。其下面的第一个子元素，正好也是div元素。因此ee显示颜色。不要被.parent误导，认为ee也没有颜色。

.parent div:fist-of-type

 

  

    
Hellow world
    
aa
      
hi
      
ee
      
ff
    
   
bb
   
cc
   
dd
   
gg
  

first-of-type.png

一步一步分析。首先在class为parent的元素下，找div标签。找到class为aa的div元素。它的父元素即即parent。在其内部，我们看它是不是第一个div标签。通过观察发现的确是。因此class为aa的内部所有内容都显示为红色。我们再看发现class为aa的内部还有div标签，这个时候就可以不用管它了。class为parent的最后一个内容为gg的div标签，很遗憾它不是第一个。所以不显示颜色。

关于div :first-child （有空格的）

  

    
aa
    
bb
    
cc
      
dd
      
ee
    
  

空格-first-of-type.png

分析 先找div标签。class为parent的div标签，我们可以发现其内部有两种标签，即p标签和div标签，然后分别
找它们的第一个就好了。另外一个是class为cc的div标签。其内部有h1标签和p标签，同样分别找到第一个就好了。
总结：element :first-child 和 element :first-of-type 前者只要在element下找第一子元素，后者只要找同种类型中的第一个元素。而无关乎element，这是和不加空格的区别。