css - 最后类型选择器有效，而第一个类型选择器无效？

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 。写得很好，解释也很好。