什么时候使用 :focus 和 :active 伪类？

区分 :focus 和 :active 伪类

虽然 :focus 和 :active 样式状态都可以通过用户交互激活，它们的功能不同

:focus

• 表示已接收输入焦点并准备好接受用户输入的元素。
• 当使用键盘导航选择元素，例如选项卡键。

:active

• 表示用户主动单击或点击的元素。
• 通常伴随：当元素通过 a 接收焦点时的焦点状态click。

主要区别

• ：focus 表示已选择一个元素进行输入，而 :active 表示单击或点击操作正在进行中。
• ：焦点由基于键盘的交互触发，而 :active 由鼠标或基于触摸触发事件。
• 单击某个元素时，它通常会在 :focus 和 :active 状态之间转换。

示例

考虑以下 HTML 和 CSS 代码：

<button>
  Click to Change Color
</button>

<style>
  button { font-weight: normal; color: black; }
  button:focus { color: red; }
  button:active { font-weight: bold; }
</style>

当按钮最初呈现时，它有无活动或焦点状态。当用户使用 Tab 为其提供焦点时，它进入 :focus 状态并且文本变为红色。如果用户随后单击该按钮，它将进入 :active 状态，导致文本变为红色且粗体。

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