与类名一起使用时，为什么CSS：first-of-type和：last-of-type的行为类似于：first-child和：last-child？

Question

我了解伪类（例如：first-of-type和：last-of-type）是目标元素，而不是类。但是，我想了解为什么当与类一起使用时，它们的行为像：first-child和last-child 。它们在班级是父母的第一个（或最后一个）孩子时起作用，

查看此笔：https://codepen.io/anon/pen/LMzrYR

section
  div.img
    figure
      img(src="http://picsum.photos/400/400/")
  div.title
    | This is a title
  div.text
    | Here is some text
  div.img
    figure
      img(src="http://picsum.photos/400/400/")
  div.img
    figure
      img(src="http://picsum.photos/400/400/")
  div.img
    figure
      img(src="http://picsum.photos/400/400/")
  div.text
    | Here is more text
  aside.hello
    | Just a little note

div {
  margin-bottom: 40px;
}

.img:first-of-type {
  border: 4px solid darkred;
}

.img {
  border: 4px solid gold;
}

.img:last-of-type {
  border: 4px solid darkblue;
}

div:first-of-type {
  background-color: lightpink;
}

div {
  background-color: lightyellow;
}

div:last-of-type {
  background-color: lightblue;
}

figure {
  margin: 0;
}

我希望看到第一个.img带有darkred边框，其余.img个带有gold边框，最后一个.img带有darkblue边框。第一个div应该有一个lightpink背景；其余的lightyellow；最后一个lightblue。

所有div选择器都能正常工作。第一个.img确实有一个darkred边框，因为它也是第一个孩子，但是如果它在.title之后，则不会。 .img的其余部分带有金色边框。删除末尾的div.text和aside.hello，最后一个.img的边界为darkblue，因为它是最后一个孩子。

为什么伪类选择器仅在.img:first-of-type也是第一个孩子而.img:last-of-type也是最后一个孩子时才按预期工作？