CSS 的 :focus 和 :active 伪类有什么区别？

:focus 和 :active 伪类之间的区别

理解 :focus 和 :active 状态之间的区别在使用时至关重要CSS。这些伪类代表与 HTML 元素交互时发挥作用的不同元素状态。

什么是 :focus？

:focus 状态表示元素具有收到输入焦点。当元素接收键盘输入或用户使用其他可聚焦机制选择它时，通常会触发此状态。表单元素（:input、:button、:a）、frame/:iframe 等元素的行为方式如下。

什么是 :active？

:active 状态表示当前被用户激活的元素。这种状态在交互场景中很常见，例如当用户单击按钮或按键时。例如，按钮通常在单击并释放时进入 :active 状态。

如何区分 :focus 和 :active

虽然当元素处于clicked、:focus 和 :active 是不同的状态。当用户单击某个元素时，它会同时接收焦点和激活，从而导致 :focus:active 状态。然而，这些状态可以独立触发。例如，一个元素可以在不激活的情况下获得焦点（例如，使用 Tab），反之亦然。

示例

考虑以下 HTML 和 CSS 代码：

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

当您将焦点放在按钮上（使用选项卡）而不单击它时，文本只会变成红色。当您单击该按钮时，文本将变为红色且粗体，表示该按钮已获得焦点并被激活。

以上是CSS 的 :focus 和 :active 伪类有什么区别？的详细内容。更多信息请关注PHP中文网其他相关文章！