：focus和：active有什么区别？

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

: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

: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伪类

有四种情况。

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

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

：focus是当元素能够接受输入时-输入框中的光标或已制表到的链接。

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

活动是指当用户激活该点时（例如单击鼠标，如果我们使用逐个字段的选项卡，则活动样式没有任何迹象。也许单击需要更多时间，请尝试按住该点），然后在该点已激活。试试这个 ：

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

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

如果在链接上使用：focus，则样式规则仅在按下键盘上的botton时适用。

使用“焦点”将使键盘用户获得与鼠标悬停时相同的效果。为了在Internet Explorer中获得相同的效果，需要“活动”。

现实情况是，这些状态无法像所有用户那样正常工作。如果不使用所有三个选择器，则会为许多无法使用鼠标的纯键盘用户带来可访问性问题。我邀请您参加#nomouse挑战赛（nomouse dot org）。