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

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

Answer 3

有四种情况.

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.当您按Tab键时,您将聚焦第二个div并看到它展示案例2.当您单击第一个div时,您会看到案例3.当您单击第二个div时,您会看到案例4 .

元素是否可聚焦是另一个问题.大多数都不是默认的.但是,它是安全的假设<a>,<input>,<textarea>在默认情况下可获得焦点.

Answer 4

:focus是指元素能够接受输入 - 光标位于输入框或已选中的链接.

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