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

2017-09-01 本文已影响0人饥人谷_醉眼天涯

关于div:first-child

<style>
    div:first-child {
      color: red;
    }
</style>
<body>
  <div class="parent">  // first-child
    <div>aa</div>
    <div>bb</div>
    <div>cc</div>
    <div>dd</div>
  </div>
</body>

运行结果如下

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

<style>
    div:first-child {
      color: red;
    }
</style>
<body>
  <div class="parent">  // first-child
    <p>aa</p>
    <p>bb</p>
    <p>cc</p>
    <p>dd</p>
  </div>
</body>

first.png

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

<style>
    div:first-child {
      color: red;
    }
</style>
<body>
  <h1>hello world</h1>   // first-child
  <div class="parent">
    <div>aa</div>
    <div>bb</div>
    <div>cc</div>
    <div>dd</div>
  </div>
</body>

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

添加h1标题.png

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

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

 <style>
    div:first-of-type {
      color: red;
    }
  </style>
<body>
  <h1>hellow world</h1>
  <div class="parent">
   <div>aa</div>
   <p>bb</p>
   <p>cc</p>
   <p>dd</p>
  </div>
  <div>ee</div>
</body>

运行效果如下。

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

.parent div:first-child

<style>
    .parent div:first-child {
      color: red;
    }
  </style>
<body>
  <div class="parent">
   <h1>hellow</h1>
   <div class="aa">aa
    <div>ee</div>
   </div>
   <p>bb</p>
   <p>cc</p>
   <p>dd</p>
  </div>
</body>

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

.parent div:fist-of-type

 <style>
    .parent div:first-of-type {
      color: red;
    }
  </style>
<body>
  <div class="parent">
    <h1>Hellow world</h1>
    <div class="aa">aa
      <h1>hi</h1>
      <div>ee</div>
      <div>ff</div>
    </div>
   <p>bb</p>
   <p>cc</p>
   <p>dd</p>
   <div>gg</div>
  </div>
</body>

first-of-type.png

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

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

<style>
    div :first-child {
      color: red;
    }
</head>
<body>
  <div class="parent">
    <p>aa</p>          /* first-child */
    <div class="bb">bb
      <h1>cc</h1>    /* first-child */
    </div>
  </div>
</body>

空格-first-child.png

首先我们找div标签,class为parent的div标签。我们关注它内部的第一子元素，这个时候就不需要要求它
同时div标签了。内容为aa的p标签匹配。再往下找。我们发现还有class为bb的div标签。其内部的第一子元素即<h1>cc</h1>,因此cc显示为红色。

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

<style>
    div :first-of-type {
      color: red;
    }
  </style>
<body>
  <div class="parent">
    <p>aa</p>
    <div>bb</div>
    <div class="cc">cc
      <h1>dd</h1>
      <p>ee</p>
    </div>
  </div>
</body>

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