:focus和:active是两个不同的状态。

• :focus 表示当当前选择该元素以接收输入时的状态，并且
• :active 表示当元素当前被用户激活时的状态。

例如，假设我们有一个<button>。该<button>不会有开始与任何国家。它只是存在。如果我们Tab过去将赋予“焦点”
<button>，它现在将进入其:focus状态。如果然后单击（或按space），则使按钮进入其（:active）状态。

关于这一点，当您单击某个元素时，将其赋予焦点，这也会培养出:focus和:active相同的错觉。 他们不一样。
单击时，按钮处于:focus:active状态。

一个例子：

<style type="text/css">

  button { font-weight: normal; color: black; }

  button:focus { color: red; }

  button:active { font-weight: bold; }

</style>



<button>

  When clicked, my text turns red AND bold!<br />

  But not when focused, where my text just turns red

</button>