html - 如何在单击时更改按钮 CSS 颜色

Question

我有以下按钮，当鼠标悬停在它们上面时会发生变化。

如何在选择其中一个按钮时设置背景颜色而不会在我单击屏幕上的其他位置时丢失选择？

在目前的方式中，点击按钮使其成为您选择的颜色，但点击屏幕的另一个区域返回到原始颜色。

button {
  padding: 15px;
  margin: 0px 3px 0px 0px;
  font-size: 20px;
  font-weight: 400;
  font-family: Arial, Helvetica, sans-serif;
  border: none;
}

button:hover {
  cursor: pointer;
  background: black;
}

.btn-scale-0,
.btn-scale-1,
.btn-scale-2,
.btn-scale-3 {
  background-color: #FE0200;
  color: white;
  text-shadow: 1px 1px 3px #8e8e8e;
}

<button id="scale-0" class="btn-scale-0">&nbsp;0&nbsp;</button>
<button id="scale-1" class="btn-scale-1">&nbsp;1&nbsp;</button>
<button id="scale-2" class="btn-scale-2">&nbsp;2&nbsp;</button>
<button id="scale-3" class="btn-scale-3">&nbsp;3&nbsp;</button>

Answer 1

如果不使用 JavaScript 就不可能在不经历意想不到的副作用的情况下实现这一目标。

如果 visited 状态无关紧要甚至是需要的，请查看 @Blazemonger's回答。

CSS 伪类 focus 和 active 是通过点击页面其他地方时丢失其状态来定义的。

JavaScript(+JQuery)解决方案:

$("#scale-0").click(function() {
  $("#scale-0").addClass('button-clicked');
});
$("#scale-1").click(function() {
  $("#scale-1").addClass('button-clicked');
});
$("#scale-2").click(function() {
  $("#scale-2").addClass('button-clicked');
});
$("#scale-3").click(function() {
  $("#scale-3").addClass('button-clicked');
});

button {
  padding: 15px;
  margin: 0px 3px 0px 0px;
  font-size: 20px;
  font-weight: 400;
  font-family:Arial, Helvetica, sans-serif;
  border:none;
}

button:hover{
  cursor: pointer;
  background: black;
}

.btn-scale-0, .btn-scale-1, .btn-scale-2, .btn-scale-3{
    background-color: #FE0200;
    color: white;
    text-shadow: 1px 1px 3px #8e8e8e;
}

.button-clicked {
  background-color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="scale-0" class="btn-scale-0 btn">&nbsp;0&nbsp;</button>
<button id="scale-1" class="btn-scale-1 btn">&nbsp;1&nbsp;</button>
<button id="scale-2" class="btn-scale-2 btn">&nbsp;2&nbsp;</button>
<button id="scale-3" class="btn-scale-3 btn">&nbsp;3&nbsp;</button>