focus和：active之间有什么区别？ [英] What is the difference between :focus and :active?

问题描述

：focus 和：active 伪类之间有什么区别？

What is the difference between the :focus and :active pseudo-classes?

推荐答案

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

:focus and :active are two different states.

：focus 表示元素是当前选择接收输入的元素输入设备（键盘）。 ：active 表示当前元素当前被用户激活的状态。

:focus represents the state when the element is the element currently selected to receive input from input devices (keyboard). :active represents the state when the element is currently being activated by the user.

一个例子。假设我们有一个< button> 。 < button> 不会有任何状态开始。它只存在。如果我们使用 Tab 为< button> 赋予焦点，它现在进入：focus state。如果您点击（或按下空格），然后让按钮输入其（：active ）状态。

Let's put that into perspective with an example. Let's say we have a <button>. The <button> will not have any state to begin with. It just exists. If we use Tab to give "focus" to the <button>, it now enters its :focus state. If you then click (or press space), you then make the button enter its (:active) state.

在这个注释上，当你点击一个元素，你给它的焦点，这也培养的幻觉，：focus 和：active 是相同的。 它们不一样。点击时，按钮位于：focus：active 状态。

On that note, when you click on an element, you give it focus, which also cultivates the illusion that :focus and :active are the same. They are not the same. When clicked the button is in :focus:active state.

例如：

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

编辑： jsfiddle

这篇关于focus和：active之间有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！