first-of-type、last-of-type选择器

平时我们使用first-child和last-child比较多，用于对同级元素第一个或最后一个元素设置CSS样式。first-of-type和last-of-type有时也会非常有用。

有个场景时容器内部有一个类似footer的角色在末端（不是始终可见，否则可以使用nth-last-child选择器），但实际不想将其计算在内。

我们的HTML结构：

<div class="container">
  <div class="item">first item</div>
  <div class="item">second item</div>
  <div class="item">last item</div>
  <div>footer</div>
</div>

CSS:

.item:last-of-type {
  color: red
}

第一感觉这样做就可以了，但其实这样做是不生效的。

stackoverflow上也有类似的问题：链接

题主使用的结构刚好最后一个元素的type和其他不同，所以last-of-type和元素的type是相关的。

于是，把我们的footer稍作修改就可以了：

<div class="container">
  <div class="item">first item</div>
  <div class="item">second item</div>
  <div class="item">last item</div>
  <footer>footer</footer>
</div>

建议CSS也做如下修改：