Html &引用；光标：指针；根本不工作

这是我的角度模板代码：

   <!-- 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>    

添加z索引只是为了尝试，如果它能带来一些不同，但它没有。我还尝试将这个类应用到其他部分，比如包装器div等等，但是它不起作用。我一直看到普通的“文本光标”而不是指针

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

试试看

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

编辑

：：ng deep

combinator（）确保定义的样式应用于组件的所有子元素，而不仅仅是组件直接创建的元素

---

由于要在

ng模板

标记中设置样式的元素（因此它不直接属于组件），因此需要使用它设置其元素的样式

请创建一个工作演示。代码光标：指针正常。它可能取决于插入span内部的innerHTML。将style属性应用于span的所有子级可能会起作用：

.pointer cursor*{cursor:pointer；}

。在span内输出什么？现在我们无法测试它，因为它是空的。如果我在该范围内放置了一些文本，指针将尝试检查该图元，以查看其是否有任何替代（或带有光标样式的内部图元）。但是，正如您的问题所示，由于所提供的代码工作正常，因此无法回答，因此我投票赞成关闭该样式，该样式可以被更具体的选择器覆盖。尝试增加特殊性，例如：

span.level-labels.pointer-cursor{cursor:pointer！important；}

哇，这很有效！这是什么意思？谢谢

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