:focus 和 :active 有什么区别？答案

【问题标题】：What is the difference between :focus and :active?:focus 和 :active 有什么区别？
【发布时间】：2010-12-13 06:35:57
【问题描述】：

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

【问题讨论】：

标签： css css-selectors pseudo-class

【解决方案1】：

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

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

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

【讨论】：

另外请注意，您可以通过使用容易混淆的 document.activeElement 属性来获取焦点元素，尽管它需要在 try catch 中，因为 IE8 可能会抛出异常。请注意，旧版本的浏览器可能会以不同的方式处理 :active 和 :focus 。 function activeElement() { try { return document.activeElement; /* can get exeption in IE8 */ } catch(e) { } }
我在这里创建了您的示例的 JSFiddle：jsfiddle.net/NCwvj 在 chrome (v24) 中进行测试我注意到单击按钮只会调用 :active 状态
Nit：如果没有 :active:focus 状态，焦点和活动的顺序会影响 HTML 按钮的状态 - 将 :active 状态放在 :focus 之后，当我点击选项卡时，我会得到活动更改并击中空间。如果 :focus 是最后一个，我永远不会看到活动状态。
@GauntFace，你用的是什么浏览器？在 Chrome 上，focus 和 active 声明的顺序无关紧要。仅当它们相互矛盾时才重要，例如color:red 和 color:blue（那么最后一个获胜）。
相关问题及答案，基于此：stackoverflow.com/a/48597351/5587480。从我的角度来看，很容易理解

【解决方案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 Pseudo-classes

【讨论】：

虽然相关，但这并不能回答问题
@GregorWeber 它通过显示定义来揭示差异
您可能知道这一点，但如果您按此顺序定义它们，visited 链接在悬停或单击时不会改变样式，因为它们的“访问性”将覆盖其他伪类。 LVHFA 是大多数人在大多数情况下想要使用的顺序。不知道你为什么包含lang...

【解决方案3】：

有四种情况。

默认情况下，活动和焦点都处于关闭状态。
当您tab 循环浏览可聚焦元素 时，它们将输入:focus（未激活）。
当您单击一个不可聚焦的元素时，它会输入:active（没有焦点）。
当您单击一个可聚焦元素时，它会输入: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。

一个元素是否可聚焦是another question。大多数不是默认的。但是，可以肯定地假设 <a>、<input>、<textarea> 默认是可聚焦的。

【讨论】：

感谢您指出元素如何具有 :active 而不是 :focus。这是我感到困惑的一件事，其他答案没有解决。

【解决方案4】：

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

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

【讨论】：

:hover 和 :focus 不是一回事。 :hover 是一个特定的状态， :focus 是一个特定的状态。将它们等同起来有点令人困惑和误导。
我并不怀疑您的专业知识。我试图指出 :hover 和 :active 不是一回事。当它被简单地放置为 :hover 大约等于 :active 用于键盘使用时，这对于刚接触网络和可访问性的人来说是令人困惑的。我很欣赏这个答案，但也许更深入一点会有所帮助？
当然它们不是一回事！我没有说它们大致相同。（请再次阅读我的帖子。）我正在谈论使用鼠标和使用键盘完成相同任务之间的区别。我是说你必须使用所有这些来为两组用户提供相同的体验。否则，物理上无法使用鼠标的仅键盘用户将很难看到他们在页面上的标签位置。这给这些人在浏览页面时造成了可访问性问题。

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

:focus 不能那样工作。我正在输入的文本区域当前具有焦点，因为我单击了一个按钮。它也可以通过点击它来失去和恢复焦点，然后再次进入它。稍后，我将通过单击将焦点放在右侧的“添加评论”按钮上。所有这一切都无需键盘输入导致焦点。
如果你不能将焦点放在一个链接上，那只是因为链接不能被聚焦，除非你把它放在一个锚上，或者你添加一个 tabindex 属性。但是您可以关注 DOM 元素，例如 div 或输入。

【解决方案7】：

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

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

【讨论】：

嗨！是否有“当前点击”的状态？假设导航菜单中有三个链接，当当前“打开”链接时，如何让它保持某种颜色？向用户显示他当前所在的位置。 as :active 仅在单击链接（在这种情况下）时才有效，但在鼠标按钮释放时会变回。