327

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

4

7 回答 7

481

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

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

例如，假设我们有一个<button>. 将<button>没有任何状态开始。它只是存在。如果我们使用Tab“焦点”给<button>，它现在进入它的:focus状态。如果随后单击（或按下space），则使按钮进入其 ( :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

于 2009-11-05T02:51:24.810 回答
64 
: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 伪类

于 2009-11-05T02:50:22.000 回答
29

有四种情况。

  1. 默认情况下，活动和焦点都是关闭的。
  2. 当您通过选项卡循环可聚焦元素时，它们将进入: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 .

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

于 2015-10-13T10:31:14.377 回答
7

:focus 是元素能够接受输入的时间 - 输入框中的光标或已被选项卡指向的链接。

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

于 2009-11-05T02:47:05.503 回答
1

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

<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"/>
于 2014-04-10T04:35:00.107 回答
-3

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

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

于 2013-08-19T18:10:48.980 回答
-6

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

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

于 2015-06-18T23:22:08.503 回答