html - :focus on class doesn't work

Question

我希望类在选择后显示不同的颜色。为什么它只是回到非 active 颜色？我该怎么做才能让它专注于我的类(class)？

我在这个论坛上尝试了很多东西，但似乎没有任何效果。我很快就需要它来上学。

.Auswahl {
  outline: none;
  background-color: #F6F6F6;
  border: none;
  margin-right: -4px;
  float: left;
  -webkit-transition: background-color 0.2s linear;
  -moz-transition: background-color 0.2s linear;
  -o-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
}
.Auswahl:hover {
  background-color: #FF0004;
}
.Auswahl:active {
  background-color: #00FF2B;
}
.Auswahl:focus {
  background-color: #7100FF;
}

<div class="Auswahl">
  <h1>Sparkasse</h1>
  <br>Vorteile
  <br>Nachteile
</div>

Answer 1

The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).

更多信息 here

像这样更改您的 HTML:

.Auswahl {
  outline: none;
  background-color: #F6F6F6;
  border: none;
  margin-right: -4px;
  float: left;
  -webkit-transition: background-color 0.2s linear;
  -moz-transition: background-color 0.2s linear;
  -o-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
}
.Auswahl:hover {
  background-color: #FF0004;
}
.Auswahl:focus {
  background-color: #7100FF;
}
.Auswahl:active {
  background-color: #00FF2B;
}

<button class="Auswahl">
  <h1>Sparkasse</h1>
  <br>Vorteile
  <br>Nachteile
</button>