最后类型选择器有效，而第一个类型选择器不起作用？

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(不存在)。

有一些方法可以解决它，但没有一种方法是完美的。我最喜欢的答案是这个。写得很好，解释得很好。