:focus和:active是两个不同的状态.
:focus表示当前 Select 该元素以接收输入时的状态 :active表示用户当前激活元素时的状态.例如，假设我们有一个<button>分.这<button>人一开始就不会有任何状态.它就是存在的.如果我们使用Tab将"焦点"赋予<button>，它现在将进入:focus状态.如果您随后单击(或按空格键)，则会使按钮进入其(:active)状态.
在这一点上，当你点击一个元素时，你给了它焦点，这也培养了:focus和:active是相同的错觉.They are not the same.当点击该按钮时，该按钮处于: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 only,<br />
where my text just turns red
</button>编辑:jsfiddle