时间戳

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

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

问题描述

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

但是，这些元素中的任何一个都可以使用 *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 来实现它。

标签： htmlcssangular

解决方案

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

如果您提供更多的html，我将能够给出一个更具体的例子

推荐阅读