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


当前回答

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

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

例如,我们有一个<按钮>。<按钮>开始时将没有任何状态。它只是存在。如果我们使用Tab赋予<按钮>“focus”,它现在进入它的:focus状态。如果您然后单击(或按空格),那么您将使按钮进入其(:active)状态。

在这一点上,当您单击一个元素时,您为它提供了焦点,这也产生了:focus和:active是相同的错觉。它们不一样。单击按钮时,该按钮处于:focus:active状态。

一个例子: <风格type = " text / css " > 按钮{font-weight: normal;颜色:黑色;} 按钮:对焦{颜色:红色;} 按钮:活动{font-weight:粗体;} > < /风格 < >按钮 当点击,我的文本变成红色和粗体!< br / > 但当只聚焦时,<br /> 我的文字变成了红色 < / >按钮

)一:jsfiddle

其他回答

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

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

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

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

有四种情况。

默认情况下,活动和焦点都是关闭的。 当你按tab键循环可聚焦的元素时,它们将进入:focus(不激活)。 当您单击不可聚焦的元素时,它进入:active(无焦点)。 当你点击一个可聚焦的元素时,它进入:激活:聚焦(同时激活和聚焦)。

例子:

<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>默认是可聚焦的。

: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表示元素当前被用户激活时的状态。

例如,我们有一个<按钮>。<按钮>开始时将没有任何状态。它只是存在。如果我们使用Tab赋予<按钮>“focus”,它现在进入它的:focus状态。如果您然后单击(或按空格),那么您将使按钮进入其(:active)状态。

在这一点上,当您单击一个元素时,您为它提供了焦点,这也产生了:focus和:active是相同的错觉。它们不一样。单击按钮时,该按钮处于:focus:active状态。

一个例子: <风格type = " text / css " > 按钮{font-weight: normal;颜色:黑色;} 按钮:对焦{颜色:红色;} 按钮:活动{font-weight:粗体;} > < /风格 < >按钮 当点击,我的文本变成红色和粗体!< br / > 但当只聚焦时,<br /> 我的文字变成了红色 < / >按钮

)一:jsfiddle