锚标记禁用颜色属性不起作用？答案

【问题标题】：Anchor tag disabled color attribute not working?锚标记禁用颜色属性不起作用？
【发布时间】：2023-03-31 13:39:01
【问题描述】：

我使用组件禁用了锚标记，需要将灰色显示为禁用链接，但这里链接被禁用，而不是变成灰色。所以用户无法找到它是否被禁用。你能帮帮我吗？

HTML：

   <li class="nav-item" [class.disabled]="profile_flag">
       <a class="nav-link {{routeProfileStatus}}" style="cursor: pointer;" tabindex=" 
            {{profile_flag?-1:0}}" (click)="gotoProfile()">My Profile</a>
   </li>
    <li class="nav-item" [class.disabled]="waitingRoom_flag">
        <a class="nav-link {{routeStatus}}"  style="cursor: pointer;" tabindex=" 
             {{waitingRoom_flag?-1:0}}" (click)="gotoDashboard()">Waiting Room</a>
     </li>

组件：

 profile_flag : boolean = false;
  waitingRoom_flag : boolean = false;

css:

.disabled{
    color:grey;
    text-decoration:none;
    cursor:default;
    pointer-events:none;
}

【问题讨论】：

您需要将类应用于链接而不是列表项

标签： html css angular css-selectors

【解决方案1】：

您的.disabled 类已添加到li 标记，但您需要将该规则应用于li 内的a ，

因此，请改用.disabled > a 作为该 CSS 规则的选择器。

【讨论】：

【解决方案2】：

从li 中删除[class.disabled] 并在a 上使用ngClass

<a class="nav-link {{routeStatus}}" [ngClass]="{ 'disabled' : waitingRoom_flag}" style="cursor: pointer;" tabindex="{{waitingRoom_flag?-1:0}}" (click)="gotoDashboard()">Waiting Room</a>

【讨论】：

【解决方案3】：

你需要在a标签中使用disabled类而不是li标签

【讨论】：