css - :focus and :active?有什么区别

Question

:focus 和 :active 伪类有什么区别？

Answer 1

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

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

例如，假设我们有一个 <button> . <button>不会有任何状态开始。它只是存在。如果我们使用 Tab 将“焦点”赋予 <button> , 它现在进入其 :focus状态。如果您随后单击(或按 空格键)，您就会使按钮进入其 ( :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 only,<br />
 where my text just turns red
</button>

编辑:jsfiddle