:focus 和 :active 有什么区别？

Question

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

Answer 1

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

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

例如，假设我们有一个 。 开始时没有任何状态。它只是存在。如果我们使用 Tab 为 提供“焦点”，它现在会进入 :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

Answer 2

: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

来源：CSS 伪类

Answer 3

有四种情况。

1. 默认情况下，活动和焦点均处于关闭状态。
2. 当您按 Tab 循环浏览可聚焦元素时，它们将输入 :focus（不处于活动状态）。
3. 当您点击一个不可聚焦的元素时，它会进入:active（没有焦点）。
4. 当您单击可聚焦元素时，它会输入:active:focus（同时活动和聚焦）。

示例：

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

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

---

元素是否可聚焦是另一个问题。大多数都不是默认的。但是，可以安全地假设 、、</code> 默认情况下是可聚焦的。

Answer 4

• :focus 是指元素能够接受输入 - 输入框中的光标或已使用 Tab 键访问的链接。

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

Answer 5

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

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

Answer 6

焦点只能通过键盘输入给出，但元素可以通过鼠标或键盘激活。

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

Answer 7

使用“焦点”将为键盘用户提供与鼠标用户悬停鼠标时相同的效果。在 Internet Explorer 中需要“Active”才能获得相同的效果。

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