Mat tab last child - 只影响一个组而不影响组件中的所有其他组？

Question

我运行进入这个例子是为了解决将最后一个选项卡移动到组右侧的问题 - 这正是我需要的。

举个例子：StackBlitz

我已经尝试添加 class 并尝试以下操作...但是我无法只为一组更改样式。

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

如何才能使 css 效果只针对我的特定组？

Answer 1

您可以通过将 .mat-tab-group class 添加到您的 select 或者将其与:nth-child, :first-child, 等等。这取决于你想要select哪个group/row。这里有两个例子：

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

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

下面的示例将仅针对第二个 group/row 中的最后一个标签。要定位特定的 group/row，您可以将 nth-child 数字更改为您想要的任何值：

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

Mat tab last child - only affect one group and not all other groups in component?