:focus 和 :active 有什么区别? [英] What is the difference between :focus and :active?

问题描述

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

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

推荐答案

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

:focus and :active are two different states.

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

• :focus represents the state when the element is currently selected to receive input and
• :active represents the state when the element is currently being activated by the user.

例如，假设我们有一个 <button>.<button> 将没有任何状态开始.它只是存在.如果我们使用 Tab 将焦点"赋予 ，它现在进入其 :focus 状态.如果然后单击(或按 space)，则使按钮进入其 (:active) 状态.

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

关于那个注意，当你点击一个元素时，你给它焦点，这也培养了 :focus 和 :active 相同的错觉.它们不一样.当点击按钮时，按钮处于:focus:active状态.

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.

一个例子:

<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 有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！