css - 如何隐藏带有嵌套选项卡组的 mat-tab-header，隐藏外部 mat-tab-group 而不隐藏内部

Question

我基本上有 html

<mat-tab-group>
    <mat-tab>
        <mat-tab-group>
            <mat-tab>
            </mat-tab>
        </mat-tab-group>
    </mat-tab>
</mat-tab-group>

如何使用 css(或任何真正的方法)隐藏外部选项卡组 mat-tab-header 元素，但不影响内部选项卡标题？

Answer 1

想通了，只需要选择直接 child

<mat-tab-group class="invisible-tabs">
    <mat-tab>
        <mat-tab-group>
            <mat-tab>
            </mat-tab>
        </mat-tab-group>
    </mat-tab>
</mat-tab-group>

.invisible-tabs {
  > .mat-tab-header {
    display: none;
  }
}