单击时转换按钮颜色

Question

我希望按钮的颜色在每次单击时都会发生变化。在下面的代码 sn-p 中，它从绿色变为蓝色。

问题是一旦按钮获得焦点，无论点击多少次，颜色都不会改变。要重新启用效果，我必须单击其他位置以使按钮失去焦点。

我认为button:active 事件会在每次单击按钮时重置进程，但事实并非如此。

button {
  background: red;
  color: black;
  height: 50px;
  width: 100px;
}

button:active {
  background: green;
}

button:focus {
  background: blue;
  transition: all 3s ease;
}

<button>Click Me</button>

Answer 1

你或许应该看看你的伪类的顺序 (:focus/:active)

：active 应该始终排在最后！

有一些关于 CSS 伪类及其正确使用和顺序的文章。

这是我从 W3schools (https://www.w3schools.com/css/css_pseudo_classes.asp) 那里拿到的：

注意： a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后才能生效！ a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名不区分大小写。*

:focus 通常与 :hover 类似（因为 hover 仅适用于鼠标）