Question

我在样式按钮元素方面遇到问题。这是示例：

$clrWhite: #fff;
$clrPrimary: #3c9494;
.khanbank__button {
    display: block;
    height: 50px;
    border: none;
    color: $clrWhite;
    cursor: pointer;
    &--primary {
        background: $clrPrimary;
        &:hover {
            background: darken($clrPrimary, 5%);
        }
    } 
}

这是我尝试过的：

Test

Answer 1

我看到您正在使用BEM

问题出在您的HTML上，因为您需要将两个类都应用于元素

<button class="khanbank__button khanbank__button--primary">Test</button>

Answer 2

您在Codepen中写道：

<button class="khanbank__button--primary">Test</button>

但是，如果我要将您的SCSS转换为普通CSS，它将变成：

:root {
  --clrWhite: #fff;
  --clrPrimary: #3c9494;
  --clrPrimaryDarken: #358282;
}

.khanbank__button {
  display: block;
  height: 50px;
  border: none;
  color: var(--clrWhite);
  cursor: pointer;
}

.khanbank__button--primary {
  background: var(--clrPrimary);
}

.khanbank__button--primary:hover {
  background: var(--clrPrimaryDarken);
}

<button class="khanbank__button--primary">Test</button>

也许现在您可以看到问题了。

在HTML中，您仅将.khanbank__button--primary应用于<button>。您还需要对其应用基类.khanbank__button。

简而言之，您的HTML应该是：

<button class="khanbank__button khanbank__button--primary">Test</button>

有关工作示例，请参见this pen。

为什么按钮元素不受CSS的影响？

2 个答案: