如何在键盘 'enter' 按下时触发 :active 伪类？ （仅使用 CSS）
How to trigger the :active pseudoclass on keyboard 'enter' press? (using only CSS)
CSS:
a:focus { opacity: .75 }
a:active { transform: translateY(4px) }
意图：
键盘用户选项卡到 link，使用 :focus 样式作为视觉提示
他们点击enter激活link； :active 样式提供视觉按键反馈
问题：
:active 样式可以正确触发鼠标单击，但不能正确触发按键。我可以只用 CSS 解决这个问题吗？
:focus 将是当键盘用户跳转到该元素时进入的状态。请注意，Tab 键将在您页面上的 link 标签之间循环，因此任何 css 样式都必须与选择器 a:focus.
一起应用
:active 将是用户按下键盘上的回车键时进入的状态。
以下是如何为键盘和鼠标用户应用 css 的一小段示例：
a:hover .class,
a:focus .class {
background-color: rgba(243,113,89, 0.95);
}
您绝对可以 :focus 使用键盘工作，但是激活会有点困难。
:focus 在该元素获得焦点时应用。就像，当用户通过鼠标单击输入字段或通过选项卡选择该输入字段时。这是一个显示焦点如何工作的示例；都用标签和鼠标。 W3School Focus For more info MDN :focus
但是 :active 有点不同。它在用户单击鼠标按钮和释放它之间的时间轴中应用。使用键盘很难实现这一点。因为没有按住回车键。用户按下回车按钮的那一刻，link 将打开。在这里您可以看到有关 :active 如何工作的示例。 W3School Active For more info MDN :active
如果您打算在 link 中使用伪 类，那么我建议使用 :focus，它对鼠标和 Tab 键都有效。
好问题！
是的，你不能再这样做了。
很久以前，MSIE 将 :active 视为 :focus，因此有一种方法可以通过超链接来实现这一点（这是在千兆互联网速度之前以及浏览器性能不佳的时候除了愚蠢的挥动旗帜或其他东西之外，显示正在进行的加载的工作。
运行 下面的代码片段可以看到实际的行为：
input type='button'可以用ENTER或SPACE- 在按钮上按住
SPACE 将显示 :active 样式（FireFox 除外；这看起来像 FF 错误，因为它适用于 mousedown）
- 每次键盘发送字符时，按住
ENTER 按钮将重复触发 onclick。
- 在按钮上按住
SPACE 将触发 onclick 仅当 SPACE 键在仍聚焦在按钮上时松开。 （例如，您可以这样模拟鼠标点击：Tab 到一个按钮，按住 space，然后再次点击 Tab 并释放它以取消点击。）
- 超链接只能用
ENTER 激活。
- 单击超链接将显示
:active 样式，使用 ENTER（或触摸）则不会。
document.getElementById('t1').focus(); // set focus for easier demo
:active
{
color: Red;
}
<input type='text' id='t1' value='Set focus and hit tab'/>
<a href='javascript:;' onclick='console.log("Hyperlink")'>Hyperlink</a>
<input type='button' value='Button' onclick='console.log("Button")'/>
因此您无法使用 JavaScript 或 Flash / Silverlight 等插件。
CSS:
a:focus { opacity: .75 }
a:active { transform: translateY(4px) }
意图：
键盘用户选项卡到 link，使用
:focus样式作为视觉提示他们点击
enter激活link；:active样式提供视觉按键反馈
问题：
:active 样式可以正确触发鼠标单击，但不能正确触发按键。我可以只用 CSS 解决这个问题吗？
:focus 将是当键盘用户跳转到该元素时进入的状态。请注意，Tab 键将在您页面上的 link 标签之间循环，因此任何 css 样式都必须与选择器 a:focus.
一起应用:active 将是用户按下键盘上的回车键时进入的状态。
以下是如何为键盘和鼠标用户应用 css 的一小段示例：
a:hover .class,
a:focus .class {
background-color: rgba(243,113,89, 0.95);
}
您绝对可以 :focus 使用键盘工作，但是激活会有点困难。
:focus 在该元素获得焦点时应用。就像，当用户通过鼠标单击输入字段或通过选项卡选择该输入字段时。这是一个显示焦点如何工作的示例；都用标签和鼠标。 W3School Focus For more info MDN :focus
但是 :active 有点不同。它在用户单击鼠标按钮和释放它之间的时间轴中应用。使用键盘很难实现这一点。因为没有按住回车键。用户按下回车按钮的那一刻，link 将打开。在这里您可以看到有关 :active 如何工作的示例。 W3School Active For more info MDN :active
如果您打算在 link 中使用伪 类，那么我建议使用 :focus，它对鼠标和 Tab 键都有效。
好问题！
是的，你不能再这样做了。
很久以前，MSIE 将 :active 视为 :focus，因此有一种方法可以通过超链接来实现这一点（这是在千兆互联网速度之前以及浏览器性能不佳的时候除了愚蠢的挥动旗帜或其他东西之外，显示正在进行的加载的工作。
运行 下面的代码片段可以看到实际的行为：
input type='button'可以用ENTER或SPACE激活
- 在按钮上按住
SPACE将显示:active样式（FireFox 除外；这看起来像 FF 错误，因为它适用于 mousedown） - 每次键盘发送字符时，按住
ENTER按钮将重复触发onclick。 - 在按钮上按住
SPACE将触发onclick仅当SPACE键在仍聚焦在按钮上时松开。 （例如，您可以这样模拟鼠标点击：Tab 到一个按钮，按住 space，然后再次点击 Tab 并释放它以取消点击。） - 超链接只能用
ENTER激活。 - 单击超链接将显示
:active样式，使用ENTER（或触摸）则不会。
document.getElementById('t1').focus(); // set focus for easier demo
:active
{
color: Red;
}
<input type='text' id='t1' value='Set focus and hit tab'/>
<a href='javascript:;' onclick='console.log("Hyperlink")'>Hyperlink</a>
<input type='button' value='Button' onclick='console.log("Button")'/>
因此您无法使用 JavaScript 或 Flash / Silverlight 等插件。