html - "cursor: pointer"根本不工作

Question

这是我的 Angular 模板代码:

   <!-- Modal -->
   <ng-template #levelsmodal let-c="close" let-d="dismiss">
        <div class="modal-header">
         Select the levels you want to show in the table and chart
        </div>
        <div id="segments-modal" class="modal-body">
          <div class="row margin" *ngFor="let level of config?.data?.groups; let i = index" (click)="selectLevel(level)">
                <div  class="colorspan" [style.backgroundColor]="level.active ? colors[i] : 'gray'" class="colorspan">
                </div>
                <span class="level-labels pointer-cursor" [innerHTML]="getLabel(level)" ></span> 
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-success" (click)="c()">Close</button>
        </div>
      </ng-template>    

“pointer-cursor”类非常简单:

.pointer-cursor{
    cursor: pointer !important; 
    z-index: 500;
}

添加 z-index 只是为了尝试它是否可以有所作为，但事实并非如此。我还尝试将此类应用于包装器 div 等其他部分，但它就是行不通。我一直看到正常的“文本光标”而不是指针...

有人知道为什么会这样吗？

Answer 1

试试看

::ng-deep .pointer-cursor{
   cursor: pointer !important; 
z-index: 500;
}

编辑 ::ng-deep 组合器 ( https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep ) 确保定义的样式适用于组件的所有子元素，而不仅仅是组件直接创建的元素。

因为你想要在 ng-template 标签中设置样式的元素(所以它不直接属于组件)，你需要使用它来设置元素的样式