CSS :focus 和:active 有什么区别？

What is the difference between :focus and :active?

提问by Jitendra Vyas

What is the difference between the :focusand :activepseudo-classes?

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

回答by Andrew Moore

:focusand :activeare two different states.

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

• :focusrepresents the state when the element is currently selected to receive input and
• :activerepresents the state when the element is currently being activated by the user.

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

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

例如，假设我们有一个<button>. 该<button>不会有开始与任何国家。它只是存在。如果我们使用Tab“焦点”给<button>，它现在进入它的:focus状态。如果您随后单击（或按space），则会使按钮进入其 ( :active) 状态。

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

在这一点上，当你点击一个元素时，你给了它焦点，这也培养了:focus和:active是相同的错觉。她们不一样。单击时按钮处于:focus:active状态。

An example:

一个例子：

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

edit: jsfiddle

编辑：jsfiddle

回答by Rubens Farias

:active       Adds a style to an element that is activated
:focus        Adds a style to an element that has keyboard input focus
:hover        Adds a style to an element when you mouse over it
:lang         Adds a style to an element with a specific lang attribute
:link         Adds a style to an unvisited link
:visited      Adds a style to a visited link

Source: CSS Pseudo-classes

来源：CSS 伪类

回答by James Lawson

There are four cases.

有四种情况。

1. By default, active and focus are both off.
2. When you tabto cycle through focusable elements, they will enter :focus(without active).
3. When you clickon a non-focusable element, it enters :active(without focus).
4. When you clickon a focusable elementit enters :active:focus(active and focus simultaneously).

1. 默认情况下，活动和焦点都关闭。
2. 当您使用Tab键循环浏览可聚焦元素时，它们将进入:focus（没有活动）。
3. 当你点击一个在非聚焦元素，它进入:active（无焦点）。
4. 当你点击一个聚焦元素进入:active:focus（活动，同时集中）。

Example:

例子：

<div>
  I cannot be focused.
</div>

<div tabindex="0">
  I am focusable.
</div>

---

---

div:focus {
  background: green;
}

div:active {
  color: orange;
}

div:focus:active {
  font-weight: bold;
}

When the page loads both are in case 1. When you press tab you will focus the second div and see it exhibit case 2. When you click on the first div you see case 3. When you click the second div, you see case 4.

当页面加载时，两者都属于情况 1。当您按 Tab 键时，您将聚焦第二个 div 并看到它展示了情况 2。当您单击第一个 div 时，您会看到情况 3。当您单击第二个 div 时，您会看到情况 4 .

---

---

Whether an element is focusable or not is another question. Most are not by default. But, it's safe to assume <a>, <input>, <textarea>are focusable by default.

一个元素是否可聚焦是另一个问题。大多数不是默认的。但是，它是安全的假设<a>，<input>，<textarea>在默认情况下可获得焦点。

回答by Emily

:focus is when an element is able to accept input - the cursor in a input box or a link that has been tabbed to.

:focus 是当元素能够接受输入时 - 输入框中的光标或已使用选项卡的链接。

:active is when an element is being activated by a user - the time between when a user presses a mouse button and then releases it.

:active 是用户激活元素的时间 - 用户按下鼠标按钮然后释放它之间的时间。

回答by Anggie Aziz

Active is when the user activating that point (Like mouse clicking, if we use tab from field-to-field there is no sign from active style. Maybe clicking need more time, just try hold click on that point), focus is happened after the point is activated. Try this :

活动是当用户激活那个点时（就像鼠标点击一样，如果我们从字段到字段使用选项卡，则活动样式没有标志。也许点击需要更多时间，只需尝试按住该点点击），焦点发生在点被激活。尝试这个 ：

<style type="text/css">
  input { font-weight: normal; color: black; }
  input:focus { color: green; outline: 1px solid green; }
  input:active { color: red; outline: 1px solid red; }
</style>

<input type="text"/>
<input type="text"/>

回答by Volker Ackermann

Focus can only be given by keyboard input, but an Element can be activated by both, a mouse or a keyboard.

焦点只能通过键盘输入提供，但元素可以通过鼠标或键盘两者激活。

If one would use :focus on a link, the style rule would only apply with pressing a botton on the keyboard.

如果将 :focus 用于链接，则样式规则仅适用于按下键盘上的按钮。

回答by AMG

Using "focus" will give keyboard users the same effect that mouse users get when they hover with a mouse. "Active" is needed to get the same effect in Internet Explorer.

使用“焦点”会给键盘用户带来与鼠标用户用鼠标悬停时获得的相同效果。要在 Internet Explorer 中获得相同的效果，需要“Active”。

The reality is, these states do not work as they should for all users. Not using all three selectors creates accessibility issues for many keyboard-only users who are physically unable to use a mouse. I invite you to take the #nomouse challenge (nomouse dot org).

现实情况是，这些状态并不适用于所有用户。不使用所有三个选择器会给许多物理上无法使用鼠标的仅键盘用户带来可访问性问题。我邀请您参加#nomouse 挑战（nomouse dot org）。