first-child 与 first-of-type

我就是我 2022-11-08 11:25 179阅读 0赞

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

<div class="parent">
      <div>Child</div> 
      <div>Child</div>
      <div>Child</div>
      <div>Child</div>
    </div>
    
    <div class="parent">
      <h1>Child</h1>   
      <div>Child</div> 
      <div>Child</div>
      <div>Child</div>
    </div>

以上，注意第二个例子中子元素的第一个`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"

![在这里插入图片描述][20210313121639160.png]  
他也推荐你使用`first-of-type`。再来看看兼容性：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]

[20210313121639160.png]: /images/20221023/0c65bc2ceeac4004944dac5c37877417.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]: /images/20221023/821db036e92c44dfbb046c0e8480d8ea.png