Mat选项卡的最后一个子项-仅影响一个组，而不影响组件中的所有其他组？

Question

当试图通过使最后一个选项卡移动到组的右侧来解决问题时，我遇到了这个示例。

下面是一个示例：StackBlitz

我尝试添加一个类并尝试以下操作...但是我无法仅更改一组的样式。

.my-class .mat-tab-label:last-child {
  margin-left: auto;
}

如何仅使css效果适合我的特定组？

Answer 1

您可以通过将.mat-tab-group类添加到选择器中并将其与：nth-​​child，：first-child等组合来选择正确的组/行。这取决于哪个组/要选择的行。这是两个示例：

这只会调整第一组的样式：

.mat-tab-group:first-child .mat-tab-label:last-child {
  margin-left: auto;
}

以下示例仅针对第二组/行中的最后一个标签。要定位特定的组/行，您可以将第n个子编号更改为您想要的任何内容：

.mat-tab-group:nth-child(2) .mat-tab-label:last-child {
  margin-left: auto;
}