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

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;
}