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

在这些儿童中，只有一个可以是第一个。这是匹配的：first-child：

<div class="parent">
  <div>Child</div> <!-- :first-child -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

first-child和：first-of-type之间的区别是：first-of-type将匹配其元素类型的第一个元素，在HTML中由其标签名称表示，即使该元素不是第一个元素父的子。到目前为止，我们看到的子元素都是div，但是忍受我，我会得到一点。

现在，反之亦然：任何：第一个孩子也是：第一类型的必要性。由于第一个孩子在这里也是第一个div，它将匹配两个伪类，以及类型选择器div：

<div class="parent">
  <div>Child</div> <!-- div:first-child,div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

现在，如果你把第一个孩子的类型从div改变为别的，像h1，它仍然是第一个孩子，但它不会再是第一个div;相反，它成为第一个(也是唯一)h1。如果在同一个父代中跟随这个第一个子代之后还有其他的div元素，那么第一个div元素将匹配div：first-of-type。在给定的示例中，第二个孩子成为第一个孩子变为h1后的第一个div：

<div class="parent">
  <h1>Child</h1>   <!-- h1:first-child,h1:first-of-type -->
  <div>Child</div> <!-- div:nth-child(2),div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
</div>

注意：first-child等价于：nth-​​child(1)。

这也意味着虽然任何元素可能只有一个子元素匹配：第一个孩子在一次，它可以并将有尽可能多的孩子匹配：第一类型伪类作为孩子的类型数量具有。在我们的示例中，选择器.parent> ：first-of-type(具有隐式*限定符：first-of-type伪)将匹配两个元素，而不只是一个：

<div class="parent">
  <h1>Child</h1>   <!-- .parent > :first-of-type -->
  <div>Child</div> <!-- .parent > :first-of-type -->
  <div>Child</div>
  <div>Child</div>
</div>

这同样适用于：last-child和：last-of-type：any：last-child也必须也是：last-of-type，因为绝对没有其他元素在其父元素之后。然而，因为最后一个div也是最后一个孩子，h1不能是最后一个孩子，尽管是最后一个类型。