: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>
