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银器？

和

我得到的有什么问题？

标签： htmlcssfont-awesome

Answer 1

我怀疑.text-danger正在使图标变红并获得优先权。

尝试类似：

.btn.disabled .text-danger {
    color: #ccc;
}