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