专注和积极之间的区别是什么?

:focus和:active伪类之间的区别是什么?

284961 次浏览
小开

:焦点是当一个元素能够接受输入-输入框中的游标或已被选项卡指向的链接。

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

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

小开
最佳答案

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

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

例如，我们有一个<button>。<button>开始时将没有任何状态。它只是存在。如果我们使用选项卡给<button>“焦点”，它现在进入它的:focus状态。如果随后单击(或按空间)，则使按钮进入其(:active)状态。

在这一点上，当你点击一个元素时，你会给它一个焦点，这也会产生:focus和:active是相同的错觉。当单击按钮时，按钮处于:focus:active状态。

< p >一个例子: 
<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

小开

焦点只能通过键盘输入来给出，但是一个元素可以同时被鼠标或键盘激活。

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

小开

Active是当用户激活该点时(就像鼠标点击一样，如果我们使用tab从字段到字段，则没有来自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"/>
小开

使用“焦点”将给键盘用户提供与鼠标用户悬停鼠标时相同的效果。在ie浏览器中需要“Active”来达到同样的效果。

实际情况是，这些状态并不是对所有用户都能正常工作。如果不同时使用这三个选择器，就会导致许多只使用键盘的用户无法使用鼠标。我邀请你参加#nomouse挑战(nomouse dot org)。

小开

有四种情况。

  1. 默认情况下，活动和焦点都是关闭的。
  2. 当你选项卡循环通过focusable元素时，它们将进入:focus(不活动)。
  3. 当你在non-focusable元素上点击时，它进入:active(没有焦点)。
  4. 当你在focusable元素上点击时，它会进入: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>在默认情况下是可聚焦的。


提交答案