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

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

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

试试这样的东西：

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

Answer 2

更高优先级的规则必须设置红色。根据，您必须覆盖它。在这个例子中，我使用 color:inherit 来呈现 parent 的颜色：

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

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

Style Disabled Button and icon inside that button

html

css

font-awesome