本文共 620 字，大约阅读时间需要 2 分钟。

二者均是用于选择某父级元素的第一个子元素。区别如下：

   
  
    
     Child
    
 
      
    
     Child
    
  
    
     Child
    
  
    
     Child
    
   
   
  
    
Child
   
      
    
     Child
    
 
      
    
     Child
    
  
    
     Child
    
   

以上，注意第二个例子中子元素的第一个div 可以使用div:first-of-type选择，但却不可以使用first-child

看起来first-of-type有更精确的粒度，也的确如此，所以应尽可能的使用。某些场景下，比如react使用emotion作为css in js的方式，如果使用first-child可能带来问题（在服务端渲染场景下，emotion会给父元素加入一个style节点，导致样式出现问题，这一点未验证，但react项目的console控制台报出了警告。）

index.js:1 The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type"