焦点和活动的区别是什么?

What is the difference between the :focus and :active pseudo-classes?

焦点和:活动伪类之间的区别是什么?

7 个解决方案

#1

298

:focus and :active are two different states.

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

:focus represents the state when the element is the element currently selected to receive input from input devices (keyboard). :active represents the state when the element is currently being activated by the user.

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

Let's put that into perspective with an example. Let's say we have a <button>. The <button> will not have any state to begin with. It just exists. If we use Tab to give "focus" to the <button>, it now enters its :focus state. If you then click (or press space), you then make the button enter its (:active) state.

让我们用一个例子来看待这个问题。假设我们有一个 <按钮> 。

On that note, when you click on an element, you give it focus, which also cultivates the illusion that :focus and :active are the same. They are not the same. When clicked the button is in :focus:active state.

在这一点上，当你点击一个元素时，你给它焦点，这也培养了一个错觉:焦点和:活动是一样的。他们不一样。单击时按钮处于:focus:活动状态。

An example:

一个例子:

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

edit: jsfiddle

编辑:jsfiddle

#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

Source: CSS Pseudo-classes

来源:CSS伪类

#3

There are four cases.

有四种情况。

By default, active and focus are both off.
默认情况下，活动和焦点都是关闭的。
When you tab to cycle through focusable elements, they will enter :focus (without active).
当您在可调焦元素中循环时，它们将输入:focus(没有活动)。
When you click on a non-focusable element, it enters :active (without focus).
当您点击一个非焦点元素时，它进入:活动的(没有焦点)。
When you click on a focusable element it enters :active:focus (active and focus simultaneously).
单击可调焦元素时，它将进入:active:focus (active)和focus (focus)。

Example:

例子:

<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;
}

When the page loads both are in case 1. When you press tab you will focus the second div and see it exhibit case 2. When you click on the first div you see case 3. When you click the second div, you see case 4.

当页面加载时，两者都在情形1中。当你按tab键时，你会把焦点放在第二个div上，并看到它显示的情形2。当您单击第一个div时，您将看到case 3。当您单击第二个div时，您将看到情形4。

Whether an element is focusable or not is another question. Most are not by default. But, it's safe to assume <a>, <input>, <textarea> are focusable by default.

元素是否可聚焦是另一个问题。大多数都不是默认的。但是，可以安全地假设，，默认可调焦。</p>

#4

:focus is when an element is able to accept input - the cursor in a input box or a link that has been tabbed to.

:焦点是当元素能够接受输入时——输入框中的光标或已被标签的链接。

:active is when an element is being activated by a user - the time between when a user presses a mouse button and then releases it.

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

#5

Active is when the user activating that point (Like mouse clicking, if we use tab from field-to-field there is no sign from active style. Maybe clicking need more time, just try hold click on that point), focus is happened after the point is activated. Try this :

活动是当用户激活该点时(如鼠标单击，如果我们使用字段到字段的选项卡，则没有活动样式的标志。也许点击需要更多的时间，只是尝试按住那个点)，焦点是在点被激活后发生的。试试这个:

<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

-2

Focus can only be given by keyboard input, but an Element can be activated by both, a mouse or a keyboard.

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

If one would use :focus on a link, the style rule would only apply with pressing a botton on the keyboard.

如果要使用:关注链接，样式规则只适用于按键盘上的按钮。

#7

-4

Using "focus" will give keyboard users the same effect that mouse users get when they hover with a mouse. "Active" is needed to get the same effect in Internet Explorer.

使用“焦点”将给键盘用户带来与鼠标悬停时相同的效果。“Active”在Internet Explorer中也需要得到同样的效果。

The reality is, these states do not work as they should for all users. Not using all three selectors creates accessibility issues for many keyboard-only users who are physically unable to use a mouse. I invite you to take the #nomouse challenge (nomouse dot org).

现实情况是，这些状态不能为所有用户工作。不使用这三个选择器会给许多只使用键盘的用户带来可访问性问题，这些用户物理上无法使用鼠标。我邀请你参加#nomouse挑战(nomouse。org)。

#1

298