有没有一种方法可以在考虑由于 *ngIf 而没有显示的元素的同时使用最后一个类型？答案

【问题标题】：Is there a way I can use last-of-type while taking into account elements that are not being displayed due to *ngIf?有没有一种方法可以在考虑由于 *ngIf 而没有显示的元素的同时使用最后一个类型？
【发布时间】：2020-12-22 00:16:45
【问题描述】：

我在一列中有许多重复的元素，我希望能够设置最后一个元素的样式并减少其底部边距，但这应该只发生在最后一个元素上。它上面的元素应该有更大的下边距。

但是，这些元素中的任何一个都可以使用 *ngIf 进行反渲染，因此我需要一种方法来确定最后一个元素是否与选择器匹配，并且如果它可见，则减少边距。

<div *ngIf="display1" class="element">Element</div>
<div *ngIf="display2" class="element">Element</div>
<div *ngIf="display3" class="element">Element</div>
<div *ngIf="display4" class="element">Element</div>

.element {
 margin-bottom: 5rem;
}

.element:last-of-type:visible {
 margin-bottom: 1rem;
}

显然visible 不是伪类，但我需要一些能够提供这种功能的东西，但最好不要使用 Javascript 来实现它。

【问题讨论】：

标签： html css angular

【解决方案1】：

这更像是一个 CSS 选项，您可以使用 css 伪选择器 last-child - 在您的示例中，如果您有一个包含元素，您可以使用具有足够特定规则的 last-child 来仅选择正确的您想要的元素（该选择器不会选择任何不是由 ngIf 创建的元素）。

如果你提供更多的 html，我可以举一个更具体的例子

【讨论】：