最后一个类型的选择器工作，而第一个类型选择器不工作？

Question

我有以下SCSS代码：

li {
  &.menu-item-type-custom {
    margin-bottom: 10px;

    a {
      //
    }

    &:last-of-type {
      margin-bottom: 40px;
    }

    &:first-of-type {
      margin-top: 40px;
    }
  }
}

在此代码中，我尝试使用一系列动态放置的li标记的第一个和最后一个元素来创建此部分顶部和底部的空白。

首先，我尝试使用last-of-type选择器按下底部：

&:last-of-type {
  margin-bottom: 40px;
}

这就像一个魅力。现在我想做同样的事情，但是从顶部开始，使用这个代码反方向：

&:first-of-type {
  margin-top: 40px;
}

但是，这不起作用。它没有在检查元素中被拾取，并且元素保留在它的位置。我尝试了其他各种各样的事情，例如使用&:nth-of-type(1)，但这也行不通。出于调试目的，我尝试在&:first-of-type选择器中设置不同的属性，但这些都不起作用。

这是我的错，或者看不见的问题，是否有针对所述问题的修复？

感谢。

Answer 1

重要的是要知道:first-of-type，:last-of-type等并不真正适用于课程，而是适用于元素类型在这种情况下附加到li。

一开始可能有点令人困惑，有时如果你遵循良好的标记做法，你可能甚至没有注意到差异，因为元素被正确隔离，但它并不像你期望的那样工作来自:first-of-class（不存在）。

围绕它有一些方法，但没有一个是完美的。我最喜欢的答案是this one。很好写和解释。