html - 样式禁用按钮和该按钮内的图标

Question

我有 2 个按钮，正常的和禁用的。

这是我的代码:

.btn.disabled {
  color: #ccc;
  background: none;
  border: #ccc 1px solid;
}


/* Try #1 */
.btn.disabled>.fa {
  color: #ccc;
}
/* Try #2 */
.btn.disabled .fa {
  color: #ccc;
}
/* Try #3 */
.btn.disabled i {
  color: #ccc;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a class="btn btn-danger btn-sm disabled"><i class="fa fa-trash text-danger "></i></a>

我不断得到

如何让我的 fa icon 变成银色？

和

我得到的东西有什么问题？

Answer 1

更高优先级的规则必须设置红色。根据 T.Short's answer你必须覆盖它。在此示例中，我使用 color:inherit 来呈现父项的颜色:

.btn.disabled {
    color: #ccc;
    background: none;
    border: #ccc 1px solid;
}
/* this (or something similar) is making it red */
.btn i.text-danger {
    color: red;
}
/* overide it to inherit the parent's color */
.btn.disabled i.text-danger {
    color: inherit;
}

<a class="btn btn-danger btn-sm disabled" ><i class="fa fa-trash text-danger ">[icon]</i></a>