Question

因为我的下拉菜单的位置不同，所以我想给它们顶部和左侧不同（具有绝对位置），但是有角度的材质会在主体end tag（）之前创建它们并具有相同的类，而我不能给出唯一的类在正确的标签上，

“第一个下拉列表”：

<div class="theme">
                            <button mat-icon-button [matMenuTriggerFor]="menu" #menuTrigger (menuClosed)="menuTrigger.focus()" aria-hidden="true" style="position: absolute; right: 299px; top: -7px;">
                                <mat-icon class="paint-format" svgIcon="core:paint-format" style="width: 21px; height: 22px;"></mat-icon>
                            </button>
                            <mat-menu #menu="matMenu" [overlapTrigger]="false" panelClass="theme">
                                <div>
                                    <span class="circle" (click)="toGreen()" style="width: 27px; display: inline-block; height: 27px; border: 1px solid #eee; border-radius: 50%; background-color: green; margin: auto 4px;"></span>

                                    <span class="circle" (click)="toBlue()" style="width: 27px; display: inline-block; height: 27px; border: 1px solid #eee; border-radius: 50%; background-color: blue; margin: auto 4px;"></span>

                                    <span class="circle" (click)="toDark()" style="width: 27px; display: inline-block; height: 27px; border: 1px solid #eee; border-radius: 50%; background-color: brown; margin: auto 4px;"></span>
                                </div>
                            </mat-menu>
                        </div>

'，第二个下拉列表是：'

<div fxFlex="35" class="smallTheme">
                                <button mat-icon-button [matMenuTriggerFor]="menuSmall" #menuTrigger (menuClosed)="menuTrigger.focus()" aria-hidden="true" style="">
                                    <mat-icon class="paint-format" svgIcon="core:paint-format" style="width: 21px; height: 22px;"></mat-icon>
                                </button>
                                <mat-menu #menuSmall="matMenu" [overlapTrigger]="false" xPosition="before" panelClass="smallTheme" class="small" [class]="'custom'">
                                    <div>
                                        <span class="circle" (click)="toGreen()" style="width: 27px; display: inline-block; height: 27px; border: 1px solid #eee; border-radius: 50%; background-color: green; margin: auto 4px;"></span>
                                        <span class="circle" (click)="toBlue()" style="width: 27px; display: inline-block; height: 27px; border: 1px solid #eee; border-radius: 50%; background-color: blue; margin: auto 4px;"></span>
                                        <span class="circle" (click)="toDark()" style="width: 27px; display: inline-block; height: 27px; border: 1px solid #eee; border-radius: 50%; background-color: brown; margin: auto 4px;"></span>
                                    </div>
                                </mat-menu>
                            </div>

任何人都可以告诉我如何区分它们以赋予不同的CSS样式吗？

Answer 1

您可以通过其父级组件访问它们，而不必为下拉菜单提供额外的类。例如

div.theme>button {
    ...
}

将仅匹配第一个代码段中的按钮，因为它是具有theme类的div的直接子代。

类似地

div.smallTheme>button {
    ...
}

只允许您编辑第二个按钮。

Answer 2

现在解决了，TNKS什么都可以：）

我只给另一个内部标签指定位置

我有两个下拉菜单，其中一个组件（一页）中的角材料位于不同位置，并且我希望为每个组件提供唯一的类

2 个答案: