Question

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

Answer 1

: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, where my text just turns red
</button>

编辑：jsfiddle

Answer 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

Answer 3

有四种情况。

默认情况下，活动和焦点均已关闭。
当标签循环显示可聚焦元素时，他们将输入: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>可以默认为焦点，这是安全的。

Answer 4

：焦点是元素能够接受输入 - 光标在输入框或已标签的链接中。

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

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

只能通过键盘输入来进行对焦，但可以通过鼠标或键盘激活元素。

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

Answer 7

使用＆＃34;焦点＆＃34;将为键盘用户提供与鼠标悬停时鼠标用户相同的效果。＆＃34;主动＆＃34;需要在Internet Explorer中获得相同的效果。

实际情况是，这些状态对所有用户都不起作用。不使用所有三个选择器会为许多物理上无法使用鼠标的键盘用户创建可访问性问题。我邀请你参加#nomouse挑战赛（nomouse dot org）。

有什么区别：焦点和：活跃？

7 个答案: