focus和：active有什么区别？

Question

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

Answer 1

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

:focus表示当元素是当前选择用于接收来自输入设备（键盘）的输入的元素时的状态。 :active表示元素当前正由用户激活的状态。

让我们以一个例子来说明这一点。假设我们有一个<button>。 <button>不会有任何状态开始。它只是存在。如果我们使用标签给“焦点”<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, where my text just turns red 
 
</button>

编辑：jsfiddle

Answer 2

：焦点是当一个元素能够接受输入 - 光标在一个输入框或已被选中的链接上。

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

Answer 3

: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

Answer 4

聚焦只能通过键盘输入来给出的，但是一个元件可以通过两个被激活，鼠标或键盘。

如果用户使用：专注于链接，则样式规则只适用于按下键盘上的按钮。

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

使用“焦点”会给键盘用户鼠标用户鼠标悬停时获得的效果。需要“活动”才能在Internet Explorer中获得相同的效果。

现实情况是，这些国家不适用于所有用户。如果不使用全部三个选择器，则会为许多无法使用鼠标的键盘用户创建可访问性问题。我邀请你参加#nomouse挑战赛（nomouse dot org）。

Answer 7

有四种情况。

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.当您按下选项卡中，将集中在第二个div，看看它表现出的情况下2。当您点击第一个div时，您会看到案例3.当您单击第二个div时，您会看到案例4.

---

元素是否可以聚焦是another question。大多数不是默认的。但是，默认情况下，可以安全地假设<a>,<input>,<textarea>是可以关注的。