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