禁用时，Zurb Foundation 会覆盖我的自定义取消按钮的背景

Question

我为取消按钮添加了一个名为 cancel 的新类。

来自 _settings.scss

$cancel-button-bg-color: $charcoal;
$cancel-button-bg-hover: lighten($cancel-button-bg-color, 20%);

来自 _buttons.scss

.cancel {
  background: $cancel-button-bg-color;
  &:hover {
    background: $cancel-button-bg-hover;
  }
}

我分配给取消按钮的颜色是#555555 或$charcoal。取消按钮的背景颜色正确显示。悬停背景颜色也显示得很好。

现在解决问题。当我将“禁用”类添加到取消按钮时，应用的背景颜色是具有不透明度的 $primary-color。我仍然想要 $charcoal 的背景颜色，但要稍微浅一点，比如不透明度为 50%。

我看到的另一个问题是，当我单击取消按钮时，按钮的背景变为 $primary-color。

我不确定我是否采用了正确的方法。我尝试使用 $secondary-color 但想知道为什么它没有改变我的按钮的背景并分配了一个次要类。

Answer 1

这是因为 CSS Specificity。 Foundation 的“禁用”样式是button[disabled]，它是一个属性和一个元素选择器。它胜过.cancel，后者只是一个类选择器。

试试

.cancel, .cancel[disabled] {
  background: $cancel-button-bg-color;
  &:hover {
    background: $cancel-button-bg-hover;
  }
}