Последняя дочерняя вкладка Mat - влияет только на одну группу, а не на все остальные группы в компоненте?

#html #css #angular #mat-tab

#HTML #css #угловой #вкладка mat-tab

Вопрос:

Я столкнулся с этим примером, когда пытался решить проблему с перемещением последней вкладки вправо от группы — это то, что мне нужно.

Вот пример: StackBlitz

Я попытался добавить класс и попробовать следующее… но я не могу изменить стиль только для одной группы.

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

Как я могу сделать css-эффект только для одной из моих групп?

Ответ №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;
}